upload project

2024-03-16 16:24:14 +03:30 · 2024-03-16 16:24:14 +03:30 · 87d2527af3
parent d977288008
commit 87d2527af3
109 changed files with 8723 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,5 @@
+CLOUDFLARE_API_TOKEN="E6IAIaNx5Ugw5crHmEEqFzO01zeBfqlfqCSBFVhp"
+
+NEXT_PUBLIC_GA_ID = "GTM-PT95KXQ"
+
+ANALYZE=true yarn build
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,43 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'prettier',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'prefer-const': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'react/prop-types': 'off',
+    quotes: ['warn', 'single', { allowTemplateLiterals: true }],
+    'no-duplicate-imports': 'error',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'no-unused-vars': 'off',
+    'no-multi-spaces': 'warn',
+    'no-multiple-empty-lines': ['warn', { max: 1 }],
+    'react/no-unknown-property': 'off',
+    'react/display-name': 'off',
+    'no-case-declarations': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# 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
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1,21 @@
+{
+    "semi": true,
+    "tabWidth": 2,
+    "printWidth": 120,
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true,
+    "requirePaddingNewLinesBetweenLines": true,
+    "importOrder": [
+      "^react(.*)",
+      "^(.*)/(components)|assets|image|utils|services/(.*)$",
+      "^(@mui/(.*)|(.*)\\.css)$",
+      "<THIRD_PARTY_MODULES>",
+      "^[./]"
+    ],
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports"
+    ]
+  }
+  
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+}
--- a/liara.json
+++ b/liara.json
@ -0,0 +1,8 @@
+{
+    "disks": [
+        {
+            "name": "impo",
+            "mountTo": "public/app"
+        }
+    ]
+}
--- a/next.config.js
+++ b/next.config.js
@ -0,0 +1,23 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
+  reactStrictMode: false,
+  compress: true,
+  images: {
+    domains: ['https://newadmin.impo.app'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'newadmin.impo.app',
+      },
+    ],
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  experimental: {
+    typedRoutes: true,
+  },
+}
+
+module.exports = nextConfig
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,56 @@
+{
+  "name": "impo-x",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build ",
+    "start": "next start",
+    "lint": "next lint",
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@loadable/component": "^5.16.3",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.15.10",
+    "@next/bundle-analyzer": "^13.5.6",
+    "@prismicio/client": "^7.3.1",
+    "@tanstack/react-query": "^5.18.1",
+    "autoprefixer": "^10.4.18",
+    "axios": "^1.4.0",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.3.1",
+    "feed": "^4.2.2",
+    "fs": "^0.0.1-security",
+    "jalali-moment": "^3.3.11",
+    "lottie-react": "^2.4.0",
+    "next": "^13.5.6",
+    "notistack": "^3.0.1",
+    "nprogress": "^0.2.0",
+    "react": "^18.2.0",
+    "react-beforeunload": "^2.6.0",
+    "react-dom": "^18.2.0",
+    "react-gtm-module": "^2.0.11",
+    "react-toastify": "^9.1.3",
+    "react-xml-parser": "^1.1.8",
+    "reading-time": "^1.5.0",
+    "rss": "^1.2.2",
+    "sharp": "^0.32.1",
+    "swiper": "^9.2.2",
+    "typed.js": "^2.1.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.8.0",
+    "encoding": "^0.1.13",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.2.5",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "5.2.2"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/fonts/YekanBakh-VF.ttf
+++ b/public/fonts/YekanBakh-VF.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-Black.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-Black.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-Bold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-Bold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-ExtraBlack.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-ExtraBlack.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-ExtraBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-ExtraBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-Light.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-Light.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-Regular.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-Regular.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-SemiBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-SemiBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-Thin.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-Thin.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakh-VF.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakh-VF.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Black.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Black.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Bold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Bold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBlack.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBlack.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Light.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Light.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Regular.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Regular.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-SemiBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-SemiBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Thin.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhFaNum-Thin.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Black.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Black.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Bold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Bold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-ExtraBlack.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-ExtraBlack.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-ExtraBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-ExtraBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Light.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Light.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Regular.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Regular.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-SemiBold.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-SemiBold.ttf
--- a/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Thin.ttf
+++ b/public/fonts/YekanBakh/ttf/YekanBakhNoEn-Thin.ttf
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-Black.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-Black.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-Bold.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-Bold.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-ExtraBlack.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-ExtraBlack.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-ExtraBold.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-ExtraBold.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-Light.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-Light.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-Regular.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-Regular.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-SemiBold.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-SemiBold.woff
--- a/public/fonts/YekanBakh/woff/YekanBakhFaNum-Thin.woff
+++ b/public/fonts/YekanBakh/woff/YekanBakhFaNum-Thin.woff
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Black.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Black.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Bold.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Bold.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-ExtraBlack.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-ExtraBlack.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-ExtraBold.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-ExtraBold.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Light.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Light.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Regular.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Regular.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-SemiBold.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-SemiBold.woff2
--- a/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Thin.woff2
+++ b/public/fonts/YekanBakh/woff2/YekanBakhFaNum-Thin.woff2
--- a/public/fonts/font.css
+++ b/public/fonts/font.css
@ -0,0 +1,12 @@
+@font-face {
+  font-family: "YekanBakh";
+  src: url("../fonts/YekanBakh/ttf/YekanBakh-VF.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-Black.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-Bold.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBlack.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-ExtraBold.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-Light.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-Regular.ttf"),
+    url("../fonts/YekanBakh/ttf/YekanBakhFaNum-SemiBold.ttf");
+  font-display: swap;
+}
--- a/public/google6394b6002bc6a226.html
+++ b/public/google6394b6002bc6a226.html
@ -0,0 +1 @@
+google-site-verification: google6394b6002bc6a226.html
--- a/public/images/activateCodeLevel4.webp
+++ b/public/images/activateCodeLevel4.webp
--- a/public/images/bazar.svg
+++ b/public/images/bazar.svg
@ -0,0 +1,10 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.2464 10.4683C31.7551 10.1291 30.8017 9.66709 28.9696 9.25035C28.4217 9.12562 27.7934 9.00595 27.0771 8.89877C26.1749 8.75834 25.1281 8.63361 23.919 8.5298L23.7491 8.51546C23.5044 7.95829 23.2503 7.38897 22.982 6.78944C22.8395 6.46791 22.7025 6.14468 22.5582 5.80187C22.5417 5.76136 22.5233 5.71917 22.5051 5.67866C21.9773 4.41867 21.4092 3.12475 20.4519 1.97548C19.3815 0.70114 17.9751 0 16.4938 0C15.0122 0 13.6075 0.702828 12.5354 1.97548C11.571 3.12306 11.0121 4.41664 10.4843 5.67511L10.4293 5.80187C10.2871 6.14468 10.1499 6.46791 10.0058 6.78944C9.73703 7.38897 9.48506 7.95829 9.23857 8.51546L9.07041 8.5298C7.85757 8.63344 6.81077 8.75834 5.90685 8.90063C5.19071 9.0095 4.56599 9.13068 4.01978 9.25221C2.19319 9.66861 1.23233 10.1309 0.74271 10.4702C0.656243 10.5306 0.588695 10.6128 0.546964 10.7073C0.505228 10.8021 0.490936 10.9059 0.505586 11.0078L0.664551 12.1449C0.905561 13.8464 1.16302 15.8447 1.58687 17.9047C1.89931 19.4905 2.33695 21.0512 2.8966 22.5729C3.12116 23.172 3.37137 23.7609 3.65111 24.3304C4.84644 26.6496 6.69566 28.5987 8.98748 29.9546C11.2791 31.3108 13.9212 32.0195 16.6112 31.9996C19.3018 31.9798 21.932 31.2325 24.2019 29.8427C26.4716 28.4529 28.2899 26.4771 29.4481 24.1405C29.6638 23.6835 29.8628 23.2159 30.0456 22.7344C31.3497 19.3597 31.852 15.6354 32.2667 12.6776L32.4967 10.9921C32.5078 10.8912 32.4904 10.7893 32.4463 10.697C32.4026 10.6049 32.3335 10.5259 32.2465 10.4682L32.2464 10.4683ZM16.4825 8.25029C14.9958 8.25029 13.6424 8.27662 12.4129 8.32388C12.4785 8.17468 12.5462 8.02513 12.6155 7.87069C12.7708 7.51911 12.9206 7.16753 13.065 6.81594C13.3655 6.05016 13.7173 5.30378 14.1191 4.58205C14.3014 4.26874 14.5103 3.97018 14.7436 3.68934C15.0432 3.33776 15.6698 2.73131 16.4823 2.73131C17.2954 2.73131 17.9219 3.33084 18.2233 3.68934C18.4564 3.97003 18.6654 4.26878 18.8479 4.58205C19.2486 5.30412 19.6006 6.0505 19.9019 6.81594C20.0462 7.16753 20.1942 7.51911 20.3511 7.87069C20.4207 8.02513 20.4865 8.17468 20.5541 8.32388C19.3244 8.27662 17.971 8.25029 16.4822 8.25029H16.4825Z" fill="url(#paint0_linear_31_7902)"/>
+<defs>
+<linearGradient id="paint0_linear_31_7902" x1="16.5005" y1="0.000168787" x2="16.5005" y2="31.9809" gradientUnits="userSpaceOnUse">
+<stop stop-color="#97D700"/>
+<stop offset="0.631" stop-color="#50BC25"/>
+<stop offset="1" stop-color="#009F64"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/images/calendarCycle.webp
+++ b/public/images/calendarCycle.webp
--- a/public/images/myket.svg
+++ b/public/images/myket.svg
@ -0,0 +1,5 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 31.3006C24.9503 31.3006 31.8006 24.4503 31.8006 16C31.8006 7.54973 24.9503 0.699429 16.5 0.699429C8.04976 0.699429 1.19946 7.54973 1.19946 16C1.19946 24.4503 8.04976 31.3006 16.5 31.3006Z" fill="#0091EA"/>
+<path d="M25.8853 14.1897C25.7573 11.2914 23.3756 8.992 20.4499 8.992C18.827 8.992 17.3641 9.70971 16.3676 10.8343C15.371 9.70971 13.9081 8.992 12.2853 8.992C9.419 8.992 7.06928 11.2 6.859 14.0297C6.84985 14.0891 6.84985 14.1669 6.84985 14.24V20.3794C6.84985 21.1337 7.45785 21.7417 8.21214 21.7417H8.24414C8.99842 21.7417 9.60643 21.1337 9.60643 20.3794V14.4366H9.61557C9.61557 12.9417 10.8316 11.7303 12.3219 11.7303C13.8167 11.7303 15.0281 12.9463 15.0281 14.4366H15.0373V19.4514C15.0373 20.2057 15.6453 20.8137 16.3996 20.8137H16.4316C17.1859 20.8137 17.7939 20.2057 17.7939 19.4514V14.4229C17.803 12.928 19.0099 11.7349 20.5001 11.7349C21.9904 11.7349 23.2201 12.9554 23.2201 14.4457H23.2293V20.3977C23.2293 21.1429 23.8373 21.7417 24.5733 21.7417H24.6053C25.3504 21.7417 25.9493 21.1337 25.9493 20.3977V14.3269C25.8853 14.2583 25.8853 14.2263 25.8853 14.1897Z" fill="white"/>
+<path d="M20.7424 22.272C20.6829 22.1714 20.4818 22.3726 20.4818 22.3726C19.7275 23.1909 18.1641 23.7166 16.5412 23.7166C14.9184 23.7166 13.3641 23.1909 12.6007 22.3726C12.6007 22.3726 12.3995 22.1623 12.3401 22.272C12.2624 22.3909 12.3812 22.5829 12.3812 22.5829C13.3458 23.9771 14.8178 24.6034 16.5412 24.6034C18.2647 24.6034 19.7367 23.9771 20.7012 22.5829C20.7104 22.5783 20.8201 22.3909 20.7424 22.272Z" fill="white"/>
+</svg>
--- a/public/images/preventionAdvice1.webp
+++ b/public/images/preventionAdvice1.webp
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /
--- a/settings.json
+++ b/settings.json
@ -0,0 +1,7 @@
+{
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  }
--- a/src/assets/images/darklogo.svg
+++ b/src/assets/images/darklogo.svg
@ -0,0 +1,24 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="32" fill="url(#paint0_radial_31_7602)"/>
+<g filter="url(#filter0_i_31_7602)">
+<path d="M45.9955 20.4829C42.5763 20.4829 39.6155 22.1288 38.1745 24.5282C37.4435 23.3643 36.3531 22.3856 35.0287 21.6982C34.586 21.4699 32.8741 20.6239 30.4732 20.6139C29.5475 20.6099 27.8877 20.6227 26.0631 21.5764C25.6942 21.769 23.8728 22.7557 22.589 24.9272C21.1393 27.275 21.2574 30.0422 21.2574 30.0422V45.4794L22.4529 44.8268L22.4543 44.8294L29.3548 41.0725C25.2938 40.118 22.2761 36.5381 22.2761 32.2674C22.2751 31.1571 22.4825 30.0565 22.8875 29.0224V29.0224C22.8973 28.9982 23.3191 27.8548 24.3649 26.9434C26.2962 25.3423 29.6319 25.1055 31.2474 26.9149C32.3164 28.1116 32.1697 31.1485 32.1697 31.5945V45.48H40.2316V30.4503C40.2316 28.4814 41.8248 26.8835 43.7903 26.8835C45.7556 26.8835 47.3488 28.48 47.3488 30.4503V35.0948H47.3554V45.4814H54.75V27.8325C54.7498 23.7735 50.8304 20.4829 45.9955 20.4829Z" fill="#EC407A"/>
+<path d="M16.8013 26.9189H9.25366V45.4801H16.8013V26.9189Z" fill="#EC407A"/>
+<path d="M13.0362 25.4137C15.1179 25.4137 16.8017 23.7261 16.7971 21.6443C16.7924 19.5626 15.1011 17.875 13.0193 17.875C10.9376 17.875 9.25377 19.5626 9.25842 21.6443C9.26307 23.7261 10.9544 25.4137 13.0362 25.4137Z" fill="#EC407A"/>
+</g>
+<defs>
+<filter id="filter0_i_31_7602" x="8.25366" y="17.875" width="46.4963" height="30.6064" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="3"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_31_7602"/>
+</filter>
+<radialGradient id="paint0_radial_31_7602" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.375 6.375) rotate(51.717) scale(62.344)">
+<stop stop-color="white"/>
+<stop offset="0.569924" stop-color="#EEEEEE"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/assets/images/darklogo.webp
+++ b/src/assets/images/darklogo.webp
--- a/src/assets/images/logo.svg
+++ b/src/assets/images/logo.svg
@ -0,0 +1,24 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" rx="32" fill="url(#paint0_radial_1316_13720)"/>
+<g filter="url(#filter0_i_1316_13720)">
+<path d="M45.9953 20.4829C42.5761 20.4829 39.6153 22.1288 38.1742 24.5282C37.4433 23.3643 36.3528 22.3856 35.0284 21.6982C34.5857 21.4699 32.8738 20.6239 30.473 20.6139C29.5473 20.6099 27.8874 20.6227 26.0629 21.5764C25.6939 21.769 23.8725 22.7557 22.5887 24.9272C21.1391 27.275 21.2572 30.0422 21.2572 30.0422V45.4794L22.4526 44.8268L22.454 44.8294L29.3545 41.0725C25.2936 40.118 22.2759 36.5381 22.2759 32.2674C22.2749 31.1571 22.4823 30.0565 22.8873 29.0224C22.897 28.9982 23.3189 27.8548 24.3647 26.9434C26.2959 25.3423 29.6316 25.1055 31.2472 26.9149C32.3162 28.1116 32.1695 31.1485 32.1695 31.5945V45.48H40.2313V30.4503C40.2313 28.4814 41.8245 26.8835 43.7901 26.8835C45.7554 26.8835 47.3486 28.48 47.3486 30.4503V35.0948H47.3551V45.4814H54.7498V27.8325C54.7495 23.7735 50.8301 20.4829 45.9953 20.4829Z" fill="#EC407A"/>
+<path d="M16.8011 26.9189H9.25342V45.4801H16.8011V26.9189Z" fill="#EC407A"/>
+<path d="M13.0362 25.4137C15.1179 25.4137 16.8017 23.7261 16.7971 21.6443C16.7924 19.5626 15.1011 17.875 13.0193 17.875C10.9376 17.875 9.25377 19.5626 9.25842 21.6443C9.26307 23.7261 10.9544 25.4137 13.0362 25.4137Z" fill="#EC407A"/>
+</g>
+<defs>
+<filter id="filter0_i_1316_13720" x="8.25342" y="17.875" width="46.4966" height="30.6064" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-1" dy="3"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1316_13720"/>
+</filter>
+<radialGradient id="paint0_radial_1316_13720" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.375 6.375) rotate(51.717) scale(62.344)">
+<stop stop-color="white"/>
+<stop offset="0.569924" stop-color="#EEEEEE"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/assets/images/paypal.webp
+++ b/src/assets/images/paypal.webp
--- a/src/assets/images/vector404.webp
+++ b/src/assets/images/vector404.webp
--- a/src/components/Typographys/Typography/index.jsx
+++ b/src/components/Typographys/Typography/index.jsx
@ -0,0 +1,57 @@
+import { Typography as MuiTypography } from "@mui/material";
+import { toFarsiNumber } from "@/utils/index";
+import { checkType } from "./types";
+import { CheckColor } from "@/themes/color";
+import { useMemo } from "react";
+
+const Typography = ({
+  children,
+  color,
+  colorType = "primary" ||
+    "secondary" ||
+    "error" ||
+    "neutral" ||
+    "neutral_variants",
+  type = "body" || "headline" || "display" || "label" || "title",
+  size = "large" || "medium" || "small",
+  farsi = true,
+  MobileType = "body" || "headline" || "display" || "label" || "title",
+  mobileSize = "large" || "medium" || "small",
+  style = Function,
+  ...rest
+}) => {
+  const isColorValid = (color) => {
+    return (
+      color === "main" ||
+      color === "OnPrimary" ||
+      color === "PrimaryContainer" ||
+      color === "OnSecondary" ||
+      color === "SecondaryContainer" ||
+      color === "OnSecondaryContainer" ||
+      color === "OnError" ||
+      color === "ErrorContainer" ||
+      color === "OnErrorContainer" ||
+      color === "OnBackground" ||
+      color === "Surface" ||
+      color === "OnSurface" ||
+      color === "SurfaceVariant" ||
+      color === "OnSurfaceVariant" ||
+      color === "Outline"
+    );
+  };
+  const TextColor = useMemo(
+    () => (isColorValid(color) ? CheckColor(colorType, color) : color),
+    [color]
+  );
+  return (
+    <MuiTypography
+      style={checkType(type, size, mobileSize, MobileType)}
+      color={TextColor}
+      {...rest}
+    >
+      {farsi == true ? toFarsiNumber(children) : children}
+    </MuiTypography>
+  );
+};
+
+export default Typography;
--- a/src/components/Typographys/Typography/types.js
+++ b/src/components/Typographys/Typography/types.js
@ -0,0 +1,117 @@
+export const types = {
+  display: {
+    large: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "64px",
+      lineHeight: "80px",
+      letterSpacing: "-0.04em",
+    },
+    medium: {
+      fontVariationSettings: "'wght' 500",
+      fontSize: "48px",
+      lineHeight: "56px",
+      letterSpacing: "-0.04em",
+    },
+    small: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "40px",
+      lineHeight: "44px",
+      letterSpacing: "-0.04em",
+    },
+  },
+  headline: {
+    large: {
+      fontVariationSettings: "'wght' 400",
+      fontSize: "40px",
+      lineHeight: "48px",
+      letterSpacing: "-0.04em",
+    },
+    medium: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "36px",
+      lineHeight: "48px",
+      letterSpacing: "-0.04em",
+    },
+    small: {
+      fontVariationSettings: "'wght' 500",
+      fontSize: "28px",
+      lineHeight: "40px",
+      letterSpacing: "-0.04em",
+    },
+  },
+  title: {
+    large: {
+      fontVariationSettings: "'wght' 700",
+      fontSize: "24px",
+      lineHeight: "32px",
+      letterSpacing: "-0.04em",
+    },
+    medium: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "19px",
+      lineHeight: "28px",
+      letterSpacing: "-0.04em",
+    },
+    small: {
+      fontVariationSettings: "'wght' 500",
+      fontSize: "16px",
+      lineHeight: "32px",
+      letterSpacing: "-0.04em",
+    },
+  },
+  body: {
+    large: {
+      fontVariationSettings: "'wght' 400",
+      fontSize: "16px",
+      lineHeight: "32px",
+      letterSpacing: "-0.04em",
+    },
+    medium: {
+      fontVariationSettings: "'wght' 400",
+      fontSize: "14px",
+      lineHeight: "24px",
+      letterSpacing: "-0.04em",
+    },
+    small: {
+      fontVariationSettings: "'wght' 300",
+      fontSize: "13px",
+      lineHeight: "26px",
+      letterSpacing: "-0.04em",
+    },
+  },
+  label: {
+    large: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "15px",
+      lineHeight: "24px",
+      letterSpacing: "-0.04em",
+    },
+    medium: {
+      fontVariationSettings: "'wght' 400",
+      fontSize: "13px",
+      lineHeight: "22px",
+      letterSpacing: "-0.04em",
+    },
+    small: {
+      fontVariationSettings: "'wght' 600",
+      fontSize: "12px",
+      lineHeight: "16px",
+      letterSpacing: "-0.04em",
+    },
+  },
+};
+
+export const checkType = (type, size, mobileSize, MobileType) => {
+  let TextStyle = types[type][size];
+  let MobileStyle = types[MobileType][mobileSize];
+  if (typeof window !== "undefined") {
+    let w = window.innerWidth;
+    if (w > 768) {
+      return TextStyle;
+    } else {
+      return MobileStyle;
+    }
+  } else {
+    return TextStyle;
+  }
+};
--- a/src/components/fonts/index.jsx
+++ b/src/components/fonts/index.jsx
@ -0,0 +1,12 @@
+import localFont from 'next/font/local';
+const YekanBakh = localFont({
+    src: [
+        {
+            path: '../../../public/fonts/YekanBakh-VF.ttf',
+            display: 'swap',
+        }
+    ], preload: true
+})
+
+export default YekanBakh;
+
--- a/src/components/forms/input/index.tsx
+++ b/src/components/forms/input/index.tsx
@ -0,0 +1,100 @@
+import { useState, useEffect } from "react";
+import styles from "./input.module.css";
+import { InputAdornment, TextField } from "@mui/material";
+import { toFarsiNumber } from "../../../utils";
+import Typography from "@/components/Typographys/Typography";
+
+interface inputProps {
+  className?: string;
+  value?:String | any;
+  defaultValue?: string;
+  onChange?: (value: any , event: any) => void;
+  icon?: string;
+  align?: string;
+  iconFun?: (event: any) => void;
+  labelInput?: string;
+  maxLength?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  rows?: string ;
+  type?: string;
+  data?: string;
+}
+function Input({
+  className,
+  value,
+  defaultValue,
+  maxLength,
+  onChange = () => {},
+  icon,
+  align,
+  iconFun,
+  labelInput,
+  placeholder,
+  multiline = false,
+  rows = undefined,
+  type = "text",
+  data,
+  ...rest
+}: inputProps) {
+  const [_value, setValue] = useState("");
+  const onTextFieldChange = (event :any) => {
+    if (data === "all") {
+      const innerValue = event.target.value;
+      setValue(innerValue);
+      onChange(innerValue , event);
+    } else {
+      const innerValue = event.target.value ?? "";
+      setValue(innerValue);
+      onChange(innerValue , innerValue);
+    }
+  };
+  useEffect(() => {
+    setValue(value);
+  }, [value]);
+  return (
+    <>
+      {labelInput ? (
+        <Typography color={""} size="large" type="label" className={styles.labelInput}>
+          {labelInput}
+        </Typography>
+      ) : undefined}
+      <TextField
+        value={toFarsiNumber(_value)}
+        type={type}
+        className={styles.inputImpo + " " + className}
+        fullWidth
+        placeholder={placeholder}
+        multiline={multiline}
+        rows={rows}
+        variant="filled"
+        InputProps={{
+          startAdornment: icon ? (
+            <InputAdornment
+              position={align === "left" ? "start" : "end"}
+              onClick={iconFun}
+            >
+              {icon}
+            </InputAdornment>
+          ) : null,
+        }}
+        inputProps={{
+          sx: {
+            "&::placeholder": {
+              color: "#1D1A22",
+              fontSize: "16px",
+              opacity: 1,
+              letterSpacing: "-0.04em",
+              fontVariationSettings: "'wght' 350",
+            },
+          },
+          maxLength,
+        }}
+        onChange={onTextFieldChange}
+        {...rest}
+      />
+    </>
+  );
+}
+
+export default Input;
--- a/src/components/forms/input/input.module.css
+++ b/src/components/forms/input/input.module.css
@ -0,0 +1,39 @@
+.Label {
+  font-variation-settings: "wght" 300 !important;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: right;
+  letter-spacing: -0.03em;
+  color: #1c1b1e;
+}
+
+.labelInput {
+  text-align: right;
+  margin-bottom: 8px !important;
+  margin-right: 3px;
+  font-variation-settings: "wght" 400 !important;
+}
+
+.inputImpo input,
+.inputImpo textarea {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #efefef;
+  border-radius: 10px;
+  background-color: #f9f9f9;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.inputImpo input::placeholder,
+.inputImpo textarea::placeholder {
+  color: #8d8d8d;
+}
+
+.inputImpo textarea {
+  padding: 8px 16px !important;
+}
+
+.inputImpo input:focus,
+.inputImpo textarea:focus {
+  border-color: #ec407a !important;
+}
--- a/src/components/scripts/NoScriptContent.jsx
+++ b/src/components/scripts/NoScriptContent.jsx
@ -0,0 +1,14 @@
+const NoScriptContent = () => {
+  return (
+      <noscript>
+        <iframe
+          src="https://www.googletagmanager.com/ns.html?id=GTM-PT95KXQ"
+          height="0"
+          width="0"
+          style={{ display: "none", visibility: "hidden" }}
+        ></iframe>
+      </noscript>
+  );
+};
+
+export default NoScriptContent;
--- a/src/components/scripts/WithJavaScript.jsx
+++ b/src/components/scripts/WithJavaScript.jsx
@ -0,0 +1,10 @@
+const WithJavaScript = () => {
+  return (
+    <div>
+      {/* Content for when JavaScript is enabled */}
+      <p>This content is rendered when JavaScript is enabled.</p>
+    </div>
+  );
+};
+
+export default WithJavaScript;
--- a/src/layout/appbarMain/appbar.module.css
+++ b/src/layout/appbarMain/appbar.module.css
@ -0,0 +1,308 @@
+.mainDark {
+  background-color: transparent;
+  width: 100%;
+  padding: 1rem;
+  position: absolute;
+  direction: rtl;
+  z-index: 10;
+  padding: 8px 10rem 8px 10rem;
+  transition: 500ms;
+}
+
+.mainDarkSticky {
+  z-index: 10;
+  position: sticky;
+  top: 0.1px;
+  background-color: #fff;
+  padding: 8px 7rem 8px 7rem;
+  /* border-bottom: 0.75px solid #efefef; */
+  transition: 500ms;
+}
+
+
+.darkmodeColor {
+  color: #fff;
+  margin: "0px 32px";
+}
+
+.LightmodeColor {
+  color: #000;
+  margin: "0px 32px";
+}
+
+.DesktopSize {
+  display: flex;
+  width: 100%;
+  flex-grow: 1;
+  align-items: center;
+  background: #fff;
+  border-radius: 50px;
+  padding: 8px 18px;
+  margin-top: 1.5rem;
+  box-shadow: 0px 4px 40px 0px rgba(176, 176, 176, 0.25);
+}
+
+.mobileSize {
+  display: none;
+}
+
+.mainDark .MenuWrapper .MenuItem {
+  color: #fff;
+  cursor: pointer;
+  font-variation-settings: "wght" 450;
+}
+
+.main .MenuWrapper .MenuItem {
+  color: #000;
+  cursor: pointer;
+}
+
+.MenuWrapper {
+  display: flex;
+  flex-direction: row;
+  padding-right: 0;
+}
+
+
+
+.darkmode {
+  color: #fff !important;
+  background-color: #ec407a !important;
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.darkmodeAndClientWindow {
+  color: #fff !important;
+  background-color: #ec407a !important;
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.darkmode:hover,
+.darkmodeAndClientWindow:hover {
+  background-color: #B80F55 !important;
+}
+
+.notDarkmode {
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.notDarkmodeAndClientWindow {
+  color: #fff !important;
+  background-color: #303388 !important;
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.notDarkmodeAndClientWindow:hover {
+  background-color: #212360 !important;
+}
+
+.justForIndex {
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.justForIndexClientWindow {
+  color: #fff !important;
+  background-color: #ec407a !important;
+  left: 0;
+  padding: 4px 49px !important;
+}
+
+.justForIndexClientWindow:hover {
+  background-color: #B80F55 !important;
+}
+
+.justForIndexClientWindow:focus {
+  background-color: #8F003F !important;
+}
+
+/* ****** */
+
+.justindexColorText {
+  color: #fff;
+}
+
+.justindexColorTextClientwindow {
+  color: #000;
+}
+
+.MenuWrapper a:hover .justindexColorTextClientwindow {
+  color: #EC407A;
+}
+
+.MenuWrapper a:hover .justindexColorText {
+  color: #000;
+}
+
+.darkmodeColorText {
+  color: #fff;
+}
+
+.darkmodeColorText:hover {
+  color: #000;
+}
+
+.darkmodeColorTextClientWindow {
+  color: #000;
+}
+
+.darkmodeColorTextClientWindow:hover {
+  color: #EC407A;
+}
+
+/* ********* */
+.jsutIndexIconMobileSize {
+  color: #fff !important;
+}
+
+.notDarkmodeColorMobileSize {
+  color: #fff !important;
+}
+
+.notDarkmodeColorClientWindowMobileSize {
+  color: #000 !important;
+}
+
+.jsutIndexIconClientwindowMobileSize {
+  color: #000 !important;
+}
+
+.darkmodeColorTextMobileSize {
+  color: #000 !important;
+}
+
+.darkmodeColorTextMobileSizeClientWindow {
+  color: #000 !important;
+}
+
+
+.jsutIndexIconMobileSizeBtn {
+  background-color: #fff !important;
+  color: #000 !important
+}
+
+.jsutIndexIconClientwindowMobileSizeBtn {
+  background-color: #ec407a !important;
+  color: #fff !important
+}
+
+.notDarkmodeColorMobileSizeBtn {
+  background-color: #fff !important;
+  color: #000 !important
+}
+
+.notDarkmodeColorClientWindowMobileSizeBtn {
+  background-color: #303388 !important;
+  color: #fff !important
+}
+
+.darkmodeColorTextMobileSizeBtn {
+  background-color: #ec407a !important;
+  color: #fff !important
+}
+
+.darkmodeColorTextMobileSizeClientWindowBtn {
+  background-color: #ec407a !important;
+  color: #fff !important
+}
+
+
+
+
+.main,
+.mainDark {
+  margin-bottom: -10%;
+}
+
+.main,
+.mainDark .MenuItem {
+  padding: 0px 24px;
+}
+
+.qq {
+  width: '80%'
+}
+
+.NavBarMobileSize button {
+  width: 100%;
+  text-align: left;
+  padding-left: 0 !important;
+}
+
+
+
+@media (max-width: 768px) {
+  .mobileSize {
+    display: block;
+  }
+
+  .mainDark {
+    padding: 0 !important;
+  }
+
+  .DesktopSize {
+    display: none;
+  }
+
+  .FlexmobileSizeBoxBtn {
+    position: relative;
+    padding: 20px;
+  }
+
+  .NavBarMobileSize {
+    padding: 20px;
+  }
+
+  .styleEachTab {
+    padding: 10px;
+    color: #000;
+  }
+
+  .styleEachTab:hover {
+    background-color: #ec407a;
+    color: #fff;
+    border-radius: 10px;
+  }
+
+  .mainDarkSticky {
+    padding: 0 !important;
+  }
+
+  .jsutIndexIconMobileSizeBtn,
+  .jsutIndexIconClientwindowMobileSizeBtn {
+    font-variation-settings: 'wght' 400;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 3668px) {
+  .downloadHeader {
+    position: absolute;
+    left: 20px;
+    top: 18px;
+  }
+
+  .FlexmobileSizeBoxBtn {
+    padding: 15px 10px;
+  }
+}
+
+@media (max-width: 1440px) {
+  .mainDark {
+    padding: 8px 2rem 8px 2rem;
+  }
+
+  .mainDarkSticky {
+    z-index: 10;
+    position: sticky;
+    top: 0.1px;
+    background-color: #fff;
+    padding: 8px 2rem 8px 2rem;
+    border-bottom: 0.75px solid #efefef;
+    transition: 500ms;
+  }
+}
--- a/src/layout/appbarMain/index.jsx
+++ b/src/layout/appbarMain/index.jsx
@ -0,0 +1,310 @@
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import styles from "./appbar.module.css";
+import logo from "@/assets/images/logo.svg";
+import darklogo from "@/assets/images/darklogo.webp";
+import Image from "next/image";
+import { Button, Drawer } from "@mui/material";
+import Typography from "@/components/Typographys/Typography";
+import MenuIcon from "@mui/icons-material/Menu";
+import ClearIcon from "@mui/icons-material/Clear";
+import { v4 as uuidv4 } from "uuid";
+import Script from "next/script";
+export default function Appbar({ darkmode = true, index = false }) {
+  const [hamburger, setHamburger] = useState(false);
+  const [ClientWindowHeight, setClientWindowHeight] = useState();
+  let menulist = [
+    {
+      id: "1",
+      link: "https://impo.app",
+      value: "صفحه اصلی",
+    },
+    {
+      id: "2",
+      link: "https://impo.app/blogs",
+      value: "مجله سلامت",
+    },
+    {
+      id: "3",
+      link: "https://impo.app/men",
+      value: "ایمپو آقایان ",
+    },
+    {
+      id: "4",
+      link: "https://impo.app/sympathy",
+      value: "همدلی",
+    },
+    {
+      id: "5",
+      link: "https://impo.app/calendar",
+      value: "تقویم قاعدگی",
+    },
+    {
+      id: "6",
+      link: "https://impo.app/careers",
+      value: "فرصت های شغلی",
+    },
+  ];
+
+  useEffect(() => {
+    var lastScrollTop = 0;
+    window.addEventListener(
+      "scroll",
+      function () {
+        var st = window.pageYOffset || document?.documentElement.scrollTop;
+        if (st > lastScrollTop) {
+          setClientWindowHeight(10);
+          document?.getElementById("headerMain")?.classList.add("mainDark");
+          document
+            ?.getElementById("headerMain")
+            ?.classList.remove("mainDarkStickyMain");
+          document
+            ?.getElementById("tableOfContents")
+            ?.classList.remove("stickyTableOfContents");
+        } else if (st < lastScrollTop) {
+          document
+            ?.getElementById("headerMain")
+            ?.classList.add("mainDarkStickyMain");
+          document?.getElementById("headerMain")?.classList.remove("mainDark");
+          document
+            ?.getElementById("tableOfContents")
+            ?.classList.add("stickyTableOfContents");
+          if (document?.documentElement.scrollTop === 0) {
+            setClientWindowHeight(0);
+            document?.getElementById("headerMain")?.classList.add("mainDark");
+            document
+              ?.getElementById("headerMain")
+              ?.classList.remove("mainDarkStickyMain");
+          }
+        }
+        lastScrollTop = st <= 0 ? 0 : st;
+      },
+      false
+    );
+  }),
+    [];
+
+  const handel = () => {
+    if (darkmode) {
+      if (index) {
+        if (ClientWindowHeight > 5) {
+          return styles.justForIndexClientWindow;
+        } else {
+          return styles.justForIndex;
+        }
+      } else if (ClientWindowHeight > 5) {
+        return styles.darkmodeAndClientWindow;
+      } else {
+        return styles.darkmode;
+      }
+    } else if (!darkmode) {
+      if (ClientWindowHeight > 5) {
+        return styles.notDarkmodeAndClientWindow;
+      } else {
+        return styles.notDarkmode;
+      }
+    }
+  };
+
+  const handelIndex = () => {
+    if (darkmode) {
+      if (index) {
+        if (ClientWindowHeight > 5) {
+          return styles.justindexColorTextClientwindow;
+        } else {
+          return styles.justindexColorText;
+        }
+      } else if (ClientWindowHeight > 5) {
+        return styles.darkmodeColorTextClientWindow;
+      } else {
+        return styles.darkmodeColorTextClientWindow;
+      }
+    } else if (!darkmode) {
+      if (ClientWindowHeight > 5) {
+        return styles.darkmodeColorTextClientWindow;
+      } else {
+        return styles.darkmodeColorText;
+      }
+    }
+  };
+
+  const handelMobileSize = () => {
+    if (darkmode) {
+      if (index) {
+        if (ClientWindowHeight > 5) {
+          return styles.jsutIndexIconClientwindowMobileSize;
+        } else {
+          return styles.jsutIndexIconMobileSize;
+        }
+      } else if (ClientWindowHeight > 5) {
+        return styles.darkmodeColorTextMobileSizeClientWindow;
+      } else {
+        return styles.darkmodeColorTextMobileSize;
+      }
+    } else if (!darkmode) {
+      if (ClientWindowHeight > 5) {
+        return styles.notDarkmodeColorClientWindowMobileSize;
+      } else {
+        return styles.notDarkmodeColorMobileSize;
+      }
+    }
+  };
+
+  const handelBtnMobileSize = () => {
+    if (darkmode) {
+      if (index) {
+        if (ClientWindowHeight > 5) {
+          return styles.jsutIndexIconClientwindowMobileSizeBtn;
+        } else {
+          return styles.jsutIndexIconMobileSizeBtn;
+        }
+      } else if (ClientWindowHeight > 5) {
+        return styles.darkmodeColorTextMobileSizeClientWindowBtn;
+      } else {
+        return styles.darkmodeColorTextMobileSizeBtn;
+      }
+    } else if (!darkmode) {
+      if (ClientWindowHeight > 5) {
+        return styles.notDarkmodeColorClientWindowMobileSizeBtn;
+      } else {
+        return styles.notDarkmodeColorMobileSizeBtn;
+      }
+    }
+  };
+
+  return (
+    <>
+      <Script
+        async
+        src="https://www.googletagmanager.com/gtag/js?id=UA-216376616-1"
+      />
+      <Script>
+        {`!function(e,t,a,r,g){e[r]=e[r]||[],e[r].push({"gtm.start":new Date().getTime(),event:"gtm.js"});var n=t.getElementsByTagName(a)[0],s=t.createElement(a);s.async=!0,s.src="https://www.googletagmanager.com/gtm.js?id="+g+("dataLayer"!=r?"&l="+r:""),n.parentNode.insertBefore(s,n)}(window,document,"script","dataLayer","GTM-PT95KXQ");`}
+      </Script>
+      <Script
+        type="text/javascript"
+        src="https://s1.mediaad.org/serve/80760/retargeting.js"
+        async
+      ></Script>
+      <Script>
+        {`!function(t,e,a){t.yektanetAnalyticsObject=a,t[a]=t[a]||function(){t[a].q.push(arguments)},t[a].q=t[a].q||[];var n=new Date,c=n.getFullYear().toString()+"0"+n.getMonth()+"0"+n.getDate()+"0"+n.getHours(),s=e.getElementsByTagName("script")[0],r=e.createElement("script");r.id="ua-script-ASatuT3o",r.dataset.analyticsobject=a,r.async=1,r.type="text/javascript",r.src="https://cdn.yektanet.com/rg_woebegone/scripts_v3/ASatuT3o/rg.complete.js?v="+c,s.parentNode.insertBefore(r,s)}(window,document,"yektanet");`}
+      </Script>
+      <header id="headerMain" className="mainDark">
+        {/* desktop size */}
+        <div className={styles.DesktopSize}>
+          <Link
+            href={"/"}
+            aria-label="link"
+            style={{
+              display: "grid",
+            }}
+          >
+            <Image
+              width="48"
+              height="48"
+              className={styles.logo}
+              src={darkmode ? logo : darklogo}
+              alt="لوگو"
+              priority
+            />
+          </Link>
+          <div style={{ flexGrow: "3" }}>
+            <ul className={styles.MenuWrapper}>
+              {menulist.map((Item) => {
+                return (
+                  <li key={uuidv4()}>
+                    <Link href={Item.link} aria-label="link">
+                      <Typography
+                        size="small"
+                        type="title"
+                        sx={{ margin: "0px 32px" }}
+                        component="span"
+                        className={handelIndex()}
+                      >
+                        {Item.value}
+                      </Typography>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+          <div style={{ position: "relative", top: "0" }}>
+            <Link href="https://impo.app/#download" aria-label="link">
+              <Button
+                variant="surface"
+                size="large"
+                className={handel()}
+                aria-label="btnName"
+              >
+                <Typography size="small" type="title">
+                  دانلود ایمپو
+                </Typography>
+              </Button>
+            </Link>
+          </div>
+        </div>
+        {/* mobile Size */}
+        <div className={styles.mobileSize}>
+          <div className={styles.FlexmobileSizeBoxBtn}>
+            <Button
+              variant="text"
+              onClick={() => setHamburger(!hamburger)}
+              className={handelMobileSize()}
+              aria-label="menu"
+            >
+              <MenuIcon style={{ fontSize: "30px" }} />
+            </Button>
+            <div className={styles.downloadHeader}>
+              <Link href="https://impo.app/#download" aria-label="link">
+                <Button className={handelBtnMobileSize()} aria-label="download">
+                  دانلود ایمپو
+                </Button>
+              </Link>
+            </div>
+          </div>
+          <Drawer
+            anchor={"right"}
+            open={hamburger}
+            variant={"temporary"}
+            PaperProps={{ style: { width: "45%" } }}
+          >
+            <div
+              className={styles.NavBarMobileSize}
+              style={hamburger ? { display: "block" } : { display: "none" }}
+            >
+              <Button
+                aria-label="btnName"
+                variant="text"
+                onClick={() => setHamburger(!hamburger)}
+                sx={{ color: "#000" }}
+                style={hamburger ? { display: "block" } : { display: "none" }}
+              >
+                <ClearIcon />
+              </Button>
+              <Image
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                priority
+                src={logo}
+                alt="لوگو"
+              />
+              {menulist.map((Item) => {
+                return (
+                  <Link href={Item.link} key={uuidv4()} aria-label="link">
+                    <Typography
+                      size="large"
+                      type="title"
+                      className={styles.styleEachTab}
+                    >
+                      {Item.value}
+                    </Typography>
+                  </Link>
+                );
+              })}
+            </div>
+          </Drawer>
+        </div>
+      </header>
+    </>
+  );
+}
--- a/src/layout/index.js
+++ b/src/layout/index.js
@ -0,0 +1,11 @@
+import { Fragment } from 'react';
+const Layout = ({ children }) => {
+    return (
+        <Fragment >
+            {children}
+        </Fragment >
+    )
+
+};
+
+export default Layout
--- a/src/pages/404.jsx
+++ b/src/pages/404.jsx
@ -0,0 +1,21 @@
+import style from "@/styles/notFound.module.css"
+import Image from "next/image";
+import vector404 from "@/assets/images/vector404.webp"
+import Link from "next/link";
+const NotFound = () => {
+    return (
+        <>
+            <div className={style.NotFound}>
+                <Image src={vector404} alt="vector404" width={591} height={423} />
+                <div className={style.action}>
+                    <h3>صفحه مورد نظرت پیدا نشد</h3>
+                    <p>اما می‌تونی برای خوندن مقاله‌های بیشتر، به مجله سلامت ایمپو یه سر بزنی</p>
+                    <Link href={"/blogs"}>
+                        خوندن مقاله‌های ایمپو
+                    </Link>
+                </div>
+            </div>
+        </>
+    );
+}
+export default NotFound;
--- a/src/pages/500.jsx
+++ b/src/pages/500.jsx
@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+
+const ServerError = () => {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push("/");
+  }, []);
+  return <></>;
+};
+export default ServerError;
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@ -0,0 +1,59 @@
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { SnackbarProvider } from "notistack";
+import Layout from "@/layout";
+import { lightTheme } from "@/themes/index";
+import "../styles/globals.css";
+import YekanBakh from "@/components/fonts/index.jsx";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import NProgress from "nprogress";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export default function App({ Component, pageProps }) {
+  const queryClient = new QueryClient();
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleStart = () => NProgress.start();
+    const handleComplete = () => NProgress.done();
+
+    router.events.on("routeChangeStart", handleStart);
+    router.events.on("routeChangeComplete", handleComplete);
+    router.events.on("routeChangeError", handleComplete);
+
+    return () => {
+      router.events.off("routeChangeStart", handleStart);
+      router.events.off("routeChangeComplete", handleComplete);
+      router.events.off("routeChangeError", handleComplete);
+    };
+  }, [router]);
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <main className={YekanBakh.className}>
+        <MuiThemeProvider theme={lightTheme}>
+          <SnackbarProvider
+            maxSnack={3}
+            dense
+            anchorOrigin={{
+              vertical: "bottom",
+              horizontal: "right",
+            }}
+          >
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </SnackbarProvider>
+        </MuiThemeProvider>
+      </main>
+    </QueryClientProvider>
+  );
+}
+
+export async function getServerSideProps({ res }) {
+  res.setHeader("Cache-Control", "s-maxage=60, stale-while-revalidate");
+
+  return {
+    props: {},
+  };
+}
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@ -0,0 +1,31 @@
+import { Html, Head, Main, NextScript } from "next/document?";
+import dynamic from "next/dynamic";
+import NoScriptContent from "../components/scripts/NoScriptContent";
+
+const WithJavaScript = dynamic(
+  () => import("../components/scripts/WithJavaScript"),
+  {
+    ssr: false,
+  }
+);
+
+export default function Document() {
+  return (
+    <Html lang="fa">
+      <Head>
+        <link
+          rel="alternate"
+          type="application/rss+xml"
+          href="https://impo.app/feed"
+        />
+      </Head>
+      <body>
+        <Main />
+        <WithJavaScript />
+        {/* Render the noscript content */}
+        <NoScriptContent />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
--- a/src/pages/heads/headPayment.jsx
+++ b/src/pages/heads/headPayment.jsx
@ -0,0 +1,16 @@
+import Head from "next/head";
+
+const HeadPayment = () => {
+  return (
+    <Head>
+      <title>پرداخت</title>
+      <meta name="description" content="پرداخت بین المللی اشتراک ایمپو" />
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      />
+      <meta name="robots" content="noindex,nofollow" />
+    </Head>
+  );
+};
+export default HeadPayment;
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -0,0 +1,7 @@
+import Payment from "./payment"
+
+export default function Home() {
+  return (
+      <Payment/>
+  );
+}
--- a/src/pages/payment/contactUs/index.jsx
+++ b/src/pages/payment/contactUs/index.jsx
@ -0,0 +1,35 @@
+import { Divider, Button } from "@mui/material";
+import style from "./style.module.css";
+import Link from "next/link";
+import WhatsAppIcon from "@mui/icons-material/WhatsApp";
+
+const ContactUs = () => {
+  return (
+    <div className={style.contactUs}>
+      <Divider className={style.divider} />
+      <div className={style.content}>
+        <div className={style.text}>
+          <h4>ارتباط با ما</h4>
+          <p>
+            در صورتی که مشکل یا سوالی برات پیش اومد،  از طریق  واتساپ باهامون در
+            ارتباط باش:
+          </p>
+        </div>
+        <div className={style.buttonContact}>
+          <Link href="https://wa.me/989157097500">
+            <Button
+              aria-label="btnName"
+              size="medium"
+              variant="outlined"
+              classes={{ startIcon: style.startIcon }}
+              startIcon={<WhatsAppIcon />}
+            >
+              ارتباط از طریق واتساپ
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ContactUs;
--- a/src/pages/payment/contactUs/style.module.css
+++ b/src/pages/payment/contactUs/style.module.css
@ -0,0 +1,70 @@
+.contactUs {
+  padding: 0 255px;
+  margin: 40px 0 0 0;
+}
+
+.divider {
+  border-color: #efefef;
+}
+
+.content {
+  border-radius: 24px 24px 0px 0px;
+  background: #f9f9f9;
+  padding: 22px 50px;
+  margin-top: 16px;
+}
+
+.startIcon {
+  margin: 0 0 0 8px !important;
+}
+
+.content h4 {
+  color: #1f1f1f;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 40px;
+  letter-spacing: -1.12px;
+  margin: 0;
+}
+
+.content p {
+  color: #1f1f1f;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 28px;
+  letter-spacing: -0.72px;
+  margin: 4px 0 0 0;
+}
+
+.buttonContact {
+  text-align: left;
+}
+
+@media (max-width: 768px) {
+  .contactUs {
+    padding: 0 16px;
+    margin: 40px 0 0 0;
+  }
+  .content {
+    text-align: center;
+  }
+
+  .content h4 {
+    margin: 0;
+    font-size: 16px;
+    line-height: 25px;
+    letter-spacing: -0.64px;
+  }
+
+  .content p {
+    font-size: 13px;
+    line-height: 28px;
+    letter-spacing: -0.72px;
+    margin: 4px 0 0 0;
+  }
+
+  .buttonContact {
+    text-align: center;
+    margin-top: 12px;
+  }
+}
--- a/src/pages/payment/form/dialog.jsx
+++ b/src/pages/payment/form/dialog.jsx
@ -0,0 +1,24 @@
+import style from "./style.module.css";
+import Dialog from "@mui/material/Dialog";
+import { Button } from "@mui/material";
+
+const DialogBox = ({ open, dialogHandler = () => {} }) => {
+  return (
+    <Dialog open={open} className={style.modalBox}>
+      <div className={style.modalFrame}>
+        <h5>اطلاعاتت ثبت شد</h5>
+        <p>
+          بعد از بررسی در صورت صحت اطلاعات، اشتراکت فعال و از طریق واتساپ بهت
+          اطلاع‌رسانی می‌شه
+        </p>
+      </div>
+      <div className={style.buttonDialog}>
+        <Button variant="contained" onClick={() => dialogHandler(false)}>
+          فهمیدم
+        </Button>
+      </div>
+    </Dialog>
+  );
+};
+
+export default DialogBox;
--- a/src/pages/payment/form/index.jsx
+++ b/src/pages/payment/form/index.jsx
@ -0,0 +1,124 @@
+import Input from "@/components/forms/input";
+import style from "./style.module.css";
+import { Button } from "@mui/material";
+import DialogBox from "./dialog";
+import axios from "../../../utils/axiosPayment";
+import { useState } from "react";
+import { convertNumbers2English } from "../../../utils/index";
+import { enqueueSnackbar } from "notistack";
+
+const Form = () => {
+  const initialState = {
+    username: "",
+    paypalUsername: "",
+    whatupUsername: "",
+  };
+
+  const validateEmail = (value) => {
+    var allowed =
+      /^([a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$)/ || /^[0-9]+$/;
+    var numberallowed = /^[0-9]+$/;
+    if (allowed.test(value) || numberallowed.test(value)) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const [state, setState] = useState(initialState);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const inputHandler = (value, name) => {
+    setState({ ...state, [name]: convertNumbers2English(value) });
+  };
+
+  const disableHanlder = () => {
+    if (!state.username || !state.paypalUsername) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const errorTextHandler = (error) => {
+    for (const property in error) {
+      if (error[property][0] !== null) {
+        return error[property][0];
+      }
+    }
+  };
+
+  const submit = async () => {
+    const data = {
+      username: state.username,
+      paypalUsername: state.paypalUsername,
+      whatupUsername: state.whatupUsername,
+    };
+    const request = await axios.post("paypal/create", data);
+    if (request?.data?.valid) {
+      setIsOpen(true);
+    } else {
+      enqueueSnackbar(
+        request?.data?.statusCode == 400
+          ? errorTextHandler(request?.data.errors)
+          : "عملیات با خطا مواجه شد",
+        { variant: "error" }
+      );
+    }
+  };
+
+  return (
+    <div className={style.form}>
+      <div className={style.item}>
+        <Input
+          value={state.username}
+          type="text"
+          labelInput="شماره یا ایمیلی که در ایمپو باهاش ثبت نام کردی (اجباری)"
+          name="username"
+          onChange={(value) => inputHandler(value, "username")}
+          placeholder="شماره یا ایمیلی که در ایمپو ثبت نام کردی"
+        />
+      </div>
+      <div className={style.item}>
+        <Input
+          value={state.paypalUsername}
+          type="text"
+          labelInput="نام کاربری در pay pal (اجباری)"
+          name="paypalUsername"
+          onChange={(value) => inputHandler(value, "paypalUsername")}
+          placeholder="شماره یا ایمیلی که در pay pal ثبت نام کردی"
+        />
+      </div>
+      <div className={style.item}>
+        <Input
+          value={state.whatupUsername}
+          type="text"
+          labelInput="شماره واتساپ"
+          name="whatupUsername"
+          onChange={(value) => inputHandler(value, "whatupUsername")}
+          placeholder="شماره واتساپی که بتونیم باهات در ارتباط باشیم"
+        />
+      </div>
+      <div className={style.item}>
+        <Button
+          aria-label="btnName"
+          size="medium"
+          onClick={submit}
+          variant="outlined"
+          disabled={disableHanlder()}
+        >
+          ارسال
+        </Button>
+      </div>
+      <DialogBox
+        open={isOpen}
+        dialogHandler={(e) => {
+          setIsOpen(e);
+          setState(initialState);
+        }}
+      />
+    </div>
+  );
+};
+
+export default Form;
--- a/src/pages/payment/form/style.module.css
+++ b/src/pages/payment/form/style.module.css
@ -0,0 +1,59 @@
+.form {
+  padding: 62px 255px 0 255px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 40px;
+  align-items: center;
+  margin-bottom: 95px;
+}
+
+.form .item {
+  text-align: center;
+  align-self: end;
+}
+
+.form button {
+  width: 40%;
+}
+
+.modalFrame {
+  padding: 25px 8px 0 8px;
+  font-family: "__YekanBakh_d453b8", "__YekanBakh_Fallback_d453b8" !important;
+  text-align: center;
+}
+
+.modalFrame h5 {
+  color: #1f1f1f;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 32px;
+  letter-spacing: -0.8px;
+  margin: 0;
+}
+
+.modalFrame p {
+  margin: 0;
+  color: #1f1f1f;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.6px;
+}
+
+.buttonDialog {
+  text-align: center;
+  padding: 16px 0 25px;
+}
+
+.buttonDialog button {
+  width: 157px;
+}
+
+@media (max-width: 768px) {
+  .form {
+    grid-template-columns: 1fr;
+    padding: 28px 16px 0 16px;
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+}
--- a/src/pages/payment/hero/index.jsx
+++ b/src/pages/payment/hero/index.jsx
@ -0,0 +1,39 @@
+import style from "./style.module.css";
+import Link from "next/link";
+import paypal from "../../../assets/images/paypal.webp";
+import Image from "next/image";
+import { Button } from "@mui/material";
+
+const Hero = () => {
+  return (
+    <div className={style.hero}>
+      <div className={style.content}>
+        <h1>پرداخت یورویی اشتراک ایمپو</h1>
+        <p>
+          <span>
+            اگه خارج از ایران زندگی می‌کنی و می‌خوای اشتراک ایمپو رو تهیه کنی:
+          </span>
+          <br />
+          ۱. مبلغ طرح اشتراکی که می‌خوای رو با استفاده از لینک pay pal  پرداخت
+          کن
+          <br />
+          ۲. بعد از پرداخت به همین صفحه برگرد
+          <br />
+          ۳. اطلاعات خواسته شده رو وارد کن و دکمه ارسال رو بزن
+          <br />
+          <span>در اولین فرصت، اشتراک مورد نظرت برات فعال میشه</span>
+        </p>
+        <Link href="https://paypal.me/AmirSajjadi?country.x=EE&locale.x=en_US" target="_blank">
+          <Button aria-label="btnName" size="medium" variant="contained">
+            از اینجا پرداخت کن
+          </Button>
+        </Link>
+      </div>
+      <div className={style.image}>
+        <Image src={paypal} alt="paypal" />
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
--- a/src/pages/payment/hero/style.module.css
+++ b/src/pages/payment/hero/style.module.css
@ -0,0 +1,87 @@
+.hero {
+  padding: 120px 255px 0 255px;
+  background: #f9f9f9;
+  display: grid;
+  grid-template-columns: 65% 1fr;
+  align-items: center;
+}
+
+.hero .image {
+  text-align: left;
+  margin-bottom: -8px;
+}
+
+.hero img {
+  width: 100%;
+  height: 100%;
+}
+
+.hero h1 {
+  color: #1f1f1f;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 56px;
+  letter-spacing: -1.28px;
+}
+
+.hero p {
+  color: #1f1f1f;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 40px;
+  letter-spacing: -0.88px;
+}
+
+.hero p span {
+  font-variation-settings: "wght" 550 !important;
+  display: inline-block;
+  margin: 8px 0;
+}
+
+.hero button {
+  font-size: 18px;
+  font-variation-settings: "wght" 450 !important;
+  line-height: 23px;
+  letter-spacing: -0.72px;
+  margin-bottom: 53px;
+}
+
+@media (max-width: 768px) {
+  .hero {
+    padding: 64px 25px 0 25px;
+    text-align: center;
+    background: #f9f9f9;
+    grid-template-columns: 1fr;
+  }
+
+  .hero h1 {
+    color: #1f1f1f;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    letter-spacing: -0.96px;
+  }
+
+  .hero p {
+    color: #1f1f1f;
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: -0.6px;
+    margin: 8px 0 12px 0;
+  }
+
+  .hero button {
+    font-size: 15px;
+    font-variation-settings: "wght" 450 !important;
+    line-height: 23px;
+    letter-spacing: -0.6px;
+    margin-bottom: 0;
+  }
+
+  .hero .image {
+    margin-top: 0px;
+    margin-bottom: -8px;
+    text-align: center;
+  }
+}
--- a/src/pages/payment/index.jsx
+++ b/src/pages/payment/index.jsx
@ -0,0 +1,19 @@
+import HeadPayment from "../heads/headPayment";
+import AppbarMain from "@/layout/appbarMain";
+import Hero from "./hero";
+import Form from "./form";
+import ContactUs from "./contactUs";
+
+const Payment = () => {
+  return (
+    <>
+      <HeadPayment />
+      <AppbarMain />
+      <Hero />
+      <Form />
+      <ContactUs />
+    </>
+  );
+};
+
+export default Payment;
--- a/src/pages/payment/style.module.css
+++ b/src/pages/payment/style.module.css
--- a/src/styles/color.css
+++ b/src/styles/color.css
@ -0,0 +1,127 @@
+:root {
+
+
+    --primary-0: #000000;
+    --primary-10: #3F0018;
+    --primary-20: #66002B;
+    --primary-30: #8F003F;
+    --primary-40: #B80F55;
+    --primary-50: #DB326E;
+    --primary-60: #FD4E87;
+    --primary-70: #FF85A4;
+    --primary-80: #FFB1C2;
+    --primary-90: #FFD9DF;
+    --primary-95: #FFECEE;
+    --primary-99: #FFFBFF;
+    --primary-100: #FFFFFF;
+    /* primary end */
+
+    /* secondary start */
+    --secondary-0: #000000;
+    --secondary-10: #261A00;
+    --secondary-20: #3F2E00;
+    --secondary-30: #5B4300;
+    --secondary-40: #795900;
+    --secondary-50: #977100;
+    --secondary-60: #B78A00;
+    --secondary-70: #D8A300;
+    --secondary-80: #F9BD10;
+    --secondary-90: #FFEFD4;
+    --secondary-95: #FFEEDE;
+    --secondary-99: #FFFBFF;
+    --secondary-100: #FFFFFF;
+    /* secondary end */
+
+
+    /* error start */
+    --error-0: #000000;
+    --error-10: #410002;
+    --error-20: #690005;
+    --error-30: #93000A;
+    --error-40: #BA1A1A;
+    --error-50: #DE3730;
+    --error-60: #FF5449;
+    --error-70: #FF897D;
+    --error-80: #FFB4AB;
+    --error-90: #FFDAD6;
+    --error-95: #FFEDEA;
+    --error-99: #FFFBFF;
+    --error-100: #FFFFFF;
+    /* error end */
+
+
+    /* neutral start */
+    --neutral-0: #000000;
+    --neutral-10: #1C1B1E;
+    --neutral-20: #313033;
+    --neutral-30: #48464A;
+    --neutral-40: #605D62;
+    --neutral-50: #79767A;
+    --neutral-60: #938F94;
+    --neutral-70: #AEAAAE;
+    --neutral-80: #CAC5CA;
+    --neutral-90: #E6E1E6;
+    --neutral-95: #F4EFF4;
+    --neutral-99: #FFFBFF;
+    --neutral-100: #FFFFFF;
+    /* neutral end */
+
+
+    /* neutral_variants start */
+    --neutral_variants-0: #000000;
+    --neutral_variants-10: #1D1A22;
+    --neutral_variants-20: #322F38;
+    --neutral_variants-30: #49454E;
+    --neutral_variants-40: #615D66;
+    --neutral_variants-50: #7A757F;
+    --neutral_variants-60: #948F99;
+    --neutral_variants-70: #AFA9B4;
+    --neutral_variants-80: #CAC4CF;
+    --neutral_variants-90: #E7E0EB;
+    --neutral_variants-95: #F5EEFA;
+    --neutral_variants-99: #FFFBFF;
+    --neutral_variants-100: #FFFFFF;
+    /* neutral_variants end */
+
+
+    /* start light colors  */
+
+    /* primary light start */
+    --primary: var(--primary-40);
+    --onPrimary: var(--primary-80);
+    --primaryContainer: var(--primary-90);
+    --onPrimaryContainer: var(--primary-10);
+    /* primary light end */
+
+    /* secondary light start */
+    --secondary: var(--secondary-40);
+    --onSecondary: var(--secondary-100);
+    --secondaryContainer: var(--secondary-90);
+    --onSecondaryContainer: var(--secondary-10);
+    /* secondary light end */
+
+
+    /* error light start */
+    --error: var(--error-40);
+    --onError: var(--error-100);
+    --errorContainer: var(--error-90);
+    --onErorContainer: var(--error-10);
+    /* error light end */
+
+    /* neutral light start */
+    --neutral: var(--neutral-99);
+    --onBackground: var(--neutral-10);
+    --surface: var(--neutral-99);
+    --onSurface: var(--neutral-10);
+    /* neutral light end */
+
+
+    /* neutral_variants light start */
+    --neutral_variants: var(--neutral_variants-90);
+    --onSurfaceVariant: var(--neutral_variants-30);
+    --outline: var(--neutral_variants-50);
+    /* neutral_variants light end */
+
+    /* end light colors  */
+
+}
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -0,0 +1,692 @@
+@import url("color.css");
+
+html,
+body {
+  padding: 0 !important;
+  margin: 0 !important;
+  direction: rtl;
+  letter-spacing: -0.04em;
+  margin: 0 !important;
+  /* scroll-behavior: smooth !important; */
+  scrollbar-width: 0px !important;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  letter-spacing: -0.04em !important;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  padding: 0 10rem;
+  letter-spacing: -0.04em !important;
+  margin: 0 !important;
+}
+
+img {
+  object-fit: cover;
+}
+
+input {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 90px;
+  outline: none !important;
+  border: 1px solid #9f97d9;
+  padding: 12px 24px;
+  margin: 2px;
+  font-variation-settings: "wght" 400;
+  width: 100%;
+}
+
+pre {
+  white-space: break-spaces;
+}
+
+select {
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 90px;
+  outline: none !important;
+  border: 1px solid #9f97d9;
+  padding: 12px 24px;
+  margin: 2px 5px;
+  font-variation-settings: "wght" 400;
+  width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+span {
+  caret-color: transparent;
+  letter-spacing: -0.04em;
+}
+
+li {
+  list-style: none;
+}
+
+.notShowIframe {
+  display: none;
+}
+
+.showIframe {
+  display: block;
+}
+
+.swiperWhyMen {
+  padding-bottom: 2rem !important;
+  z-index: 2;
+}
+
+.swiperWhyMen .swiper-pagination-bullet-active,
+.swiperWhyImpo .swiper-pagination-bullet-active {
+  background-color: var(--neutral-60);
+  width: 14px;
+  height: 14px;
+  position: relative;
+  bottom: 1px;
+  vertical-align: middle;
+}
+
+.swiperWhyImpo {
+  padding-bottom: 40px !important;
+}
+
+.swiperBlog {
+  padding-right: 17px !important;
+}
+
+.swiperBlog .swiper-slide {
+  width: 70% !important;
+}
+
+.commentsSwiper .swiper-button-prev {
+  right: 94% !important;
+  position: absolute;
+  top: 30px !important;
+  transform: rotate(180deg);
+}
+
+.commentsSwiper .swiper-button-next {
+  right: 97.8% !important;
+  position: absolute;
+  top: 30px !important;
+}
+
+.commentsSwiper {
+  padding-top: 4rem !important;
+  margin-top: -50px;
+}
+
+.commentsSwiper .swiper-button-prev::after,
+.commentsSwiper .swiper-button-next::after {
+  display: none;
+}
+
+.commentsSwiper .swiper-button-prev::before,
+.commentsSwiper .swiper-button-next::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008' stroke='%231C1B1E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  border-radius: 50px;
+  border: 1px solid #efefef;
+  width: 40px;
+  height: 25px;
+  padding: 8px;
+}
+
+.swiperComments .swiper-slide-prev,
+.swiperComments .swiper-slide-next {
+  opacity: 0.3;
+}
+
+.MuiTextField-root fieldset {
+  border: none;
+}
+
+.MuiInputBase-root {
+  padding: 0 !important;
+  border-radius: 10px !important;
+}
+
+.mainDarkNew {
+  padding: 8px 0 8px 0 !important;
+}
+
+body::-webkit-scrollbar {
+  background-color: #fff;
+  width: 5px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #ec407a;
+  border-radius: 3px;
+}
+
+/* simgle blog */
+
+#bodyContent .image {
+  text-align: center;
+}
+
+#bodyContent ol,
+#bodyContent ul {
+  line-height: 36px;
+}
+
+#bodyContent li {
+  list-style: unset !important;
+}
+
+.MuiInputBase-root::before,
+.MuiInputBase-root::after {
+  border: none !important;
+}
+
+.mainDark {
+  background-color: transparent;
+  width: 100%;
+  padding: 1rem;
+  position: absolute;
+  direction: rtl;
+  z-index: 10;
+  padding: 8px 255px 8px 255px;
+}
+
+.mainDarkSticky {
+  z-index: 10;
+  position: sticky;
+  top: 0.1px;
+  background-color: #fff;
+  padding: 8px 10rem 8px 10rem;
+  border-bottom: 0.75px solid #efefef;
+  opacity: 1;
+}
+
+.mainDarkStickyMain {
+  z-index: 10;
+  position: sticky;
+  top: 10px;
+  background-color: #fff;
+  margin: 8px 255px 8px 255px;
+  /* border-bottom: 0.75px solid #efefef; */
+  opacity: 1;
+  border-radius: 50px;
+}
+
+.mainDarkStickyMain > div {
+  position: absolute;
+}
+
+.swiper-pagination-bullet-active {
+  background-color: #938f94 !important;
+}
+
+.MuiSvgIcon-fontSize35px {
+  font-size: 35px !important;
+}
+
+.frameTabs .MuiTabs-flexContainer {
+  padding: 0;
+  display: grid;
+  row-gap: 24px;
+}
+
+.frameTabs .MuiTabs-indicator {
+  display: none;
+}
+
+.frameTabs button.Mui-selected {
+  background-color: #ec407a;
+  color: #fff;
+  border-color: #ec407a;
+  transition: 0.5s;
+}
+
+.frameTabs button.Mui-selected:hover {
+  background-color: #ec407a;
+}
+
+.frameTabs button.Mui-selected + button .facet-pill-border {
+  visibility: visible;
+}
+
+.next {
+  height: 52px;
+  stroke: #ec407a;
+  stroke-width: 4px;
+  width: 100%;
+}
+
+.facet-pill-border {
+  border-radius: 500px;
+  fill: none;
+  height: 52px;
+  left: 0px;
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  visibility: hidden;
+  transition: 0.5s;
+}
+
+.MuiTab-iconWrapper {
+  margin-bottom: 0px !important;
+}
+
+.MuiTouchRipple-root {
+  border-radius: 40px;
+}
+
+table tr {
+  border-bottom: 1px solid;
+}
+
+strong {
+  font-variation-settings: "wght" 600;
+}
+
+@media (max-width: 450px) {
+  .MuiSvgIcon-fontSize35px {
+    font-size: 22px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .commentsSwiper .swiper-button-prev::before,
+  .commentsSwiper .swiper-button-next::before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14.9998 19.9201L8.47984 13.4001C7.70984 12.6301 7.70984 11.3701 8.47984 10.6001L14.9998 4.08008' stroke='%231C1B1E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    border-radius: 50px;
+    border: 1px solid #d6d6d6;
+    width: 40px;
+    height: 25px;
+    padding: 8px;
+  }
+
+  .commentsSwiper {
+    padding-top: 2rem !important;
+  }
+
+  .commentsSwiper .swiper-button-prev {
+    right: 35% !important;
+    position: absolute;
+    bottom: 10px !important;
+    transform: rotate(180deg);
+    top: unset !important;
+  }
+
+  .commentsSwiper .swiper-button-next {
+    left: 35% !important;
+    position: absolute;
+    bottom: 10px !important;
+    top: unset !important;
+    right: unset !important;
+  }
+
+  .frameTabs {
+    overflow: unset !important;
+  }
+
+  .frameTabs .MuiTabs-scroller {
+    overflow: scroll !important;
+  }
+
+  .frameTabs .MuiTabs-scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .frameTabs .MuiTabs-flexContainer {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-bottom: 32px;
+    column-gap: 10px;
+  }
+
+  .container {
+    padding: 0 1rem !important;
+    overflow: hidden !important;
+  }
+
+  .mainDarkSticky,
+  .mainDarkStickyMain,
+  .mainDark {
+    padding: 0 !important;
+  }
+
+  .customSpace {
+    margin-top: 96px;
+  }
+
+  .customSpace2 {
+    padding-bottom: 72px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .containerSingle {
+    margin: 0 auto;
+    max-width: 1200px;
+    overflow: hidden !important;
+  }
+}
+
+@media (max-width: 1440px) {
+  .container,
+  .mainDark,
+  .mainDarkSticky,
+  .mainDarkStickyMain {
+    padding: 0 2rem;
+    overflow: hidden !important;
+  }
+
+  .ImpoAppTutorial {
+    padding: 0 55px;
+  }
+}
+
+@media (min-width: 800px) {
+  .swiperBlogs .swiper-slide {
+    width: 80% !important;
+  }
+}
+
+/*  between banner blogs style */
+
+@media (max-width: 768px) {
+  .bannerBetweenArticles.bannerBetweenMobile .firstText {
+    width: 100% !important;
+    display: block !important;
+    font-size: 18px !important;
+    text-align: center;
+    line-height: 28px;
+    margin: 16px 0 !important;
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile .bannerContent {
+    position: relative !important;
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile a {
+    position: relative !important;
+    bottom: unset !important;
+    right: 40px !important;
+    padding: 10px 24px;
+    font-variation-settings: "wght" 500;
+    top: 8px;
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile .singleElement {
+    width: 100% !important;
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.bardari {
+    background: linear-gradient(
+      267deg,
+      #ffd0e7 -8.55%,
+      #c9e5bb -8.54%,
+      #fee5ae 92.65%
+    );
+  }
+  .bannerBetweenArticles.bannerBetweenMobile.woman1 {
+    background: linear-gradient(270deg, #fbd5d0 0%, #f2a2bf 100%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.ravan {
+    background: linear-gradient(270deg, #e7e6fe 0%, #ddc0f2 100%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.man1 {
+    background: linear-gradient(90deg, #d4d7ff 0%, #e7e8ff 100%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.man2 {
+    background: linear-gradient(90deg, #d4d7ff 0%, #e7e8ff 100%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.pishgiri {
+    background: linear-gradient(90deg, #d8cded 28.04%, #ddf2f2 99.93%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.period {
+    background: linear-gradient(270deg, #fbd5d0 0%, #f2a2bf 100%);
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.sex {
+    background: var(
+      --Linear,
+      linear-gradient(270deg, #e7e6fe 0%, #ddc0f2 100%)
+    );
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile.life {
+    background: var(--Linear, linear-gradient(90deg, #ffdac7 0%, #ffede3 100%));
+  }
+
+  .bannerBetweenArticles.bannerBetweenMobile {
+    border-radius: 16px;
+    bottom: unset !important;
+    right: unset !important;
+    display: flex;
+    flex-direction: column-reverse;
+    text-align: center;
+    padding: 32px 30px;
+  }
+}
+
+.bannerBetweenArticles {
+  position: relative;
+}
+
+.bannerBetweenArticles .bannerContent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 20px 16px 16px;
+}
+
+.bannerContent .logo {
+  color: #ec407a;
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: -0.72px;
+}
+
+.bannerContent .firstText {
+  display: inline-block;
+  margin-bottom: 15px;
+}
+
+.bannerContent div {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 180%;
+  letter-spacing: -0.72px;
+  margin: 0;
+}
+
+.bannerContent a {
+  padding: 10px 20px;
+  border-radius: 8px;
+  background-color: #fff;
+  color: #1c1b1e !important;
+  position: absolute;
+  bottom: 30px;
+  right: 26px;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  box-shadow: 0px 4px 24px 0px rgba(15, 15, 15, 0.1);
+}
+
+.bannerBetweenArticles img {
+  width: 100%;
+  height: 100%;
+}
+
+.bannerMobile {
+  display: none;
+}
+
+.notShow {
+  display: none;
+}
+
+.stickyTableOfContents {
+  display: none !important;
+  position: fixed !important;
+  top: 76px !important;
+  right: 0;
+  max-height: 40vh;
+  overflow: scroll;
+  border-radius: 0 !important;
+  padding: 5px 1rem !important;
+  width: 100%;
+  z-index: 999;
+}
+
+#tableOfContents .selectedTableOfContent {
+  color: #ec407a;
+}
+
+.section {
+  margin-top: 120px;
+}
+
+.mdDown {
+  display: block;
+}
+
+.mdUp {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .stickyTableOfContents {
+    display: block !important;
+  }
+  .mdDown {
+    display: none;
+  }
+  .mdUp {
+    display: block;
+  }
+  .bannerMobile {
+    display: block;
+  }
+
+  .bannerDesktop {
+    display: none;
+  }
+
+  .bannerContent a {
+    padding: 5px 10px;
+    bottom: 19px;
+    right: 8px;
+    font-size: 14px;
+  }
+
+  .bannerContent div {
+    font-size: 15px !important;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 25px;
+    letter-spacing: -0.72px;
+    margin: 0;
+    width: 70%;
+  }
+
+  .bannerBetweenArticles .bannerContent {
+    padding: 10px;
+  }
+
+  .bannerContent .logo {
+    color: #ec407a;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: -0.72px;
+  }
+
+  .bannerContent .firstText {
+    display: inline-block;
+    width: auto;
+    margin-bottom: 0;
+    font-size: 12px !important;
+    margin-top: 15px;
+    line-height: 22px;
+  }
+
+  .singleElement .firstText {
+    width: 80% !important;
+  }
+
+  .bannerValentine {
+    display: flex !important;
+  }
+
+  .bannerValentine img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  /* Set the font size as needed */
+  -webkit-text-size-adjust: none;
+}
+
+@media (max-width: 450px) {
+  /* .selectNone {
+    user-select: none !important;
+    overflow: hidden;
+  } */
+}
+
+.Mui-expanded {
+  transform: none !important;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #ec407a;
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+}
+
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  opacity: 1;
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+.bannerValentine {
+  display: none;
+}
--- a/src/styles/notFound.module.css
+++ b/src/styles/notFound.module.css
@ -0,0 +1,68 @@
+.NotFound {
+    display: grid;
+    justify-content: center;
+    margin: 50px 0;
+    justify-items: center;
+}
+
+.NotFound img {
+    margin-top: 64px;
+}
+
+.action {
+    text-align: center;
+    display: grid;
+    justify-items: center;
+}
+
+.action h3 {
+    color: #FF007C;
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 7.543px;
+    letter-spacing: -2.4px;
+    margin-bottom: 35px;
+}
+
+.action p {
+    color: #131313;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 7.543px;
+    letter-spacing: -1.2px;
+}
+
+.action a {
+    margin-top: 40px;
+    display: block;
+    padding: 12px 20px;
+    border-radius: 36px;
+    background-color: #EC407A;
+    color: #fff;
+    width: 239px;
+}
+
+@media (max-width: 768px) {
+    .NotFound {
+        margin: 20px;
+    }
+
+    .NotFound img {
+        width: 100%;
+        height: auto;
+    }
+
+    .action h3 {
+        color: #FF007C;
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 15px;
+    }
+
+    .action p {
+        color: #131313;
+        font-size: 18px;
+        font-weight: 400;
+        line-height: 30px;
+    }
+}
--- a/src/themes/LightColors.js
+++ b/src/themes/LightColors.js
@ -0,0 +1,21 @@
+export const colors = {
+    "Primary": "#EC407A",
+    "On_Primary": "#FFFFFF",
+    "Primary_Container": "#EC407A",
+    "On_Primary_Container": "#FFFFFF",
+    "Secondary": "#D8A300",
+    "On_Secondary": "#FFFFFF",
+    "Secondary_Container": "#F9BD10",
+    "On_Secondary_Container": '#FFFBFF',
+    "Error": "#BA1A1A",
+    "OnError": "#FFFFFF",
+    "Error_Container": "#FFDAD6",
+    "On_Error_Container": "#410002",
+    "Background": "#FFFFFF",
+    "OnBackground": "#1C1B1E",
+    "Surface": "#EFEFEF",
+    "On_Surface": "#1D1A22",
+    "Surface_Variant": "#F9F9F9",
+    "On_Surface_Variant": "#48464A",
+    "Outline": "#938F94",
+}
--- a/src/themes/color.js
+++ b/src/themes/color.js
@ -0,0 +1,261 @@
+export const TonalPalletes = {
+    primary: {
+        0: "#000000",
+        10: "#3F0018",
+        20: "#66002B",
+        30: "#8F003F",
+        40: "#B80F55",
+        50: "#DB326E",
+        60: "#FD4E87",
+        70: "#FF85A4",
+        80: "#FFB1C2",
+        90: "#FFD9DF",
+        95: "#FFECEE",
+        99: "#FFFBFF",
+        100: "#FFFFFF"
+    },
+    secondary: {
+        0: "#000000",
+        10: "#261A00",
+        20: "#3F2E00",
+        30: "#5B4300",
+        40: "#795900",
+        50: "#977100",
+        60: "#B78A00",
+        70: "#D8A300",
+        80: "#F9BD10",
+        90: "#FFEFD4",
+        95: "#FFEEDE",
+        99: "#FFFBFF",
+        100: "#FFFFFF"
+    },
+    error: {
+        0: "#000000",
+        10: "#410002",
+        20: "#690005",
+        30: "#93000A",
+        40: "#BA1A1A",
+        50: "#DE3730",
+        60: "#FF5449",
+        70: "#FF897D",
+        80: "#FFB4AB",
+        90: "#FFDAD6",
+        95: "#FFEDEA",
+        99: "#FFFBFF",
+        100: "#FFFFFF"
+    },
+    neutral: {
+        0: "#000000",
+        10: "#1C1B1E",
+        20: "#313033",
+        30: "#48464A",
+        40: "#605D62",
+        50: "#79767A",
+        60: "#938F94",
+        70: "#AEAAAE",
+        80: "#CAC5CA",
+        90: "#E6E1E6",
+        95: "#F4EFF4",
+        99: "#FFFBFF",
+        100: "#FFFFFF"
+    },
+    neutral_variants: {
+        0: "#000000",
+        10: "#1D1A22",
+        20: "#322F38",
+        30: "#49454E",
+        40: "#615D66",
+        50: "#7A757F",
+        60: "#948F99",
+        70: "#AFA9B4",
+        80: "#CAC4CF",
+        90: "#E7E0EB",
+        95: "#F5EEFA",
+        99: "#FFFBFF",
+        100: "#FFFFFF"
+    }
+
+};
+export const Light = {
+    primary: {
+        main: {
+            backgroundColor: TonalPalletes.primary[40],
+            color: TonalPalletes.primary[60]
+        },
+        OnPrimary: {
+            backgroundColor: TonalPalletes.primary[80],
+            color: TonalPalletes.primary[0]
+        },
+        PrimaryContainer: {
+            backgroundColor: TonalPalletes.primary[90],
+            color: TonalPalletes.primary[10]
+        },
+        OnPrimaryContainer: {
+            backgroundColor: TonalPalletes.primary[10],
+            color: TonalPalletes.primary[90]
+        }
+    },
+    secondary: {
+        main: {
+            backgroundColor: TonalPalletes.secondary[40],
+            color: TonalPalletes.secondary[60]
+        },
+        OnSecondary: {
+            backgroundColor: TonalPalletes.secondary[100],
+            color: TonalPalletes.secondary[0]
+        },
+        SecondaryContainer: {
+            backgroundColor: TonalPalletes.secondary[90],
+            color: TonalPalletes.secondary[10]
+        },
+        OnSecondaryContainer: {
+            backgroundColor: TonalPalletes.secondary[10],
+            color: TonalPalletes.secondary[90]
+        }
+    },
+    error: {
+        main: {
+            backgroundColor: TonalPalletes.error[40],
+            color: TonalPalletes.error[60]
+        },
+        OnError: {
+            backgroundColor: TonalPalletes.error[100],
+            color: TonalPalletes.error[0]
+        },
+        ErrorContainer: {
+            backgroundColor: TonalPalletes.error[90],
+            color: TonalPalletes.error[10]
+        },
+        OnErrorContainer: {
+            backgroundColor: TonalPalletes.error[10],
+            color: TonalPalletes.error[90]
+        }
+    },
+    neutral: {
+        main: {
+            backgroundColor: TonalPalletes.neutral[99],
+            color: TonalPalletes.neutral[10]
+        },
+        OnBackground: {
+            backgroundColor: TonalPalletes.neutral[10],
+            color: TonalPalletes.neutral[90]
+        },
+        Surface: {
+            backgroundColor: TonalPalletes.neutral[99],
+            color: TonalPalletes.neutral[10]
+        },
+        OnSurface: {
+            backgroundColor: TonalPalletes.neutral[10],
+            color: TonalPalletes.neutral[90]
+        }
+    },
+    neutral_variants: {
+        SurfaceVariant: {
+            backgroundColor: TonalPalletes.neutral_variants[90],
+            color: TonalPalletes.neutral_variants[10]
+        },
+        OnSurfaceVariant: {
+            backgroundColor: TonalPalletes.neutral_variants[30],
+            color: TonalPalletes.neutral_variants[70]
+        },
+        Outline: {
+            backgroundColor: TonalPalletes.neutral_variants[50],
+            color: TonalPalletes.neutral_variants[50]
+        },
+
+    }
+}
+export const Dark = {
+    primary: {
+        main: {
+            backgroundColor: TonalPalletes.primary[80],
+            color: TonalPalletes.primary[20]
+        },
+        OnPrimary: {
+            backgroundColor: TonalPalletes.primary[20],
+            color: TonalPalletes.primary[80]
+        },
+        PrimaryContainer: {
+            backgroundColor: TonalPalletes.primary[30],
+            color: TonalPalletes.primary[70]
+        },
+        OnPrimaryContainer: {
+            backgroundColor: TonalPalletes.primary[90],
+            color: TonalPalletes.primary[10]
+        }
+    },
+    secondary: {
+        main: {
+            backgroundColor: TonalPalletes.secondary[80],
+            color: TonalPalletes.secondary[20]
+        },
+        OnSecondary: {
+            backgroundColor: TonalPalletes.secondary[20],
+            color: TonalPalletes.secondary[80]
+        },
+        SecondaryContainer: {
+            backgroundColor: TonalPalletes.secondary[30],
+            color: TonalPalletes.secondary[70]
+        },
+        OnSecondaryContainer: {
+            backgroundColor: TonalPalletes.secondary[90],
+            color: TonalPalletes.secondary[10]
+        }
+    },
+    error: {
+        main: {
+            backgroundColor: TonalPalletes.error[80],
+            color: TonalPalletes.error[20]
+        },
+        OnError: {
+            backgroundColor: TonalPalletes.error[20],
+            color: TonalPalletes.error[80]
+        },
+        ErrorContainer: {
+            backgroundColor: TonalPalletes.error[30],
+            color: TonalPalletes.error[70]
+        },
+        OnErrorContainer: {
+            backgroundColor: TonalPalletes.error[90],
+            color: TonalPalletes.error[10]
+        }
+    },
+    neutral: {
+        Background: {
+            backgroundColor: TonalPalletes.neutral[10],
+            color: TonalPalletes.neutral[90]
+        },
+        OnBackground: {
+            backgroundColor: TonalPalletes.neutral[90],
+            color: TonalPalletes.neutral[10]
+        },
+        Surface: {
+            backgroundColor: TonalPalletes.neutral[10],
+            color: TonalPalletes.neutral[90]
+        },
+        OnSurface: {
+            backgroundColor: TonalPalletes.neutral[80],
+            color: TonalPalletes.neutral[20]
+        }
+    },
+    neutral_variants: {
+        SurfaceVariant: {
+            backgroundColor: TonalPalletes.neutral_variants[30],
+            color: TonalPalletes.neutral_variants[70]
+        },
+        OnSurfaceVariant: {
+            backgroundColor: TonalPalletes.neutral_variants[80],
+            color: TonalPalletes.neutral_variants[20]
+        },
+        Outline: {
+            backgroundColor: TonalPalletes.neutral_variants[60],
+            color: TonalPalletes.neutral_variants[40]
+        },
+
+    }
+}
+
+export const CheckColor = (type, color) => {
+    let TextColor = Light[type]?.[color]
+    return TextColor?.backgroundColor
+}
--- a/src/themes/index.js
+++ b/src/themes/index.js
@ -0,0 +1,296 @@
+import { createTheme } from '@mui/material/styles';
+import { faIR } from '@mui/material/locale';
+import palette from './palette';
+import darkpallete from './palette-dark';
+import typography from './typography';
+import shadows from './shadows';
+import shape from './shape';
+import overrides from './overrides';
+
+export const lightTheme = createTheme(
+    {
+        direction: 'rtl',
+        shape,
+        overrides,
+        palette,
+        shadows,
+        typography,
+        props: {
+            MuiTextField: {
+                InputLabelProps: {
+                    shrink: true,
+                },
+            },
+            MuiAutocomplete: {
+                disablePortal: true,
+            },
+        },
+        components: {
+            MuiButton: {
+                defaultProps: {
+                    variant: "contained"
+                },
+                styleOverrides: {
+                    sizeSmall: {
+                        fontSize: 14,
+                        padding: "8px 16px",
+                        fontVariationSettings: "'wght' 400",
+                        letterSpacing: '-0.04em'
+                    },
+                    sizeMedium: {
+                        padding: "8px 24px",
+                        fontSize: 16,
+                        fontVariationSettings: "'wght' 600",
+                        letterSpacing: '-0.04em'
+                    },
+                    sizeLarge: {
+                        padding: "8px 24px",
+                        fontSize: 24,
+                        fontVariationSettings: "'wght' 700",
+                        letterSpacing: '-0.04em'
+                    },
+                },
+                variants: [
+                    {
+                        props: { variant: "primary" },
+                        style: {
+                            background: palette.colors.Primary_Container,
+                            color: palette.colors.On_Primary,
+                            "&:hover": {
+                                background: '#B80F55',
+                                color: palette.colors.On_Primary,
+                            },
+                            "&:focus": {
+                                background: '#8F003F',
+                                color: palette.colors.On_Primary,
+                            },
+                            "&:active": {
+                                background: '#66002B',
+                                color: palette.colors.On_Primary,
+                            },
+                            "&:disabled": {
+                                background: '#D9D9D9',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "surface" },
+                        style: {
+                            background: palette.colors.Surface,
+                            color: palette.colors.On_Surface,
+                            "&:hover": {
+                                background: '#E7E0EB',
+                                color: palette.colors.On_Surface,
+                            },
+                            "&:focus": {
+                                background: '#CAC4CF',
+                                color: palette.colors.OnBackground,
+                            },
+                            "&:active": {
+                                background: '#AFA9B4',
+                                color: palette.colors.Background,
+                            },
+                            "&:disabled": {
+                                background: '#D9D9D9',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "error" },
+                        style: {
+                            background: palette.colors.Error,
+                            color: palette.colors.OnError,
+                            "&:hover": {
+                                background: '#DE3730',
+                                color: palette.colors.OnError,
+                            },
+                            "&:focus": {
+                                background: '#93000A',
+                                color: palette.colors.OnError,
+                            },
+                            "&:active": {
+                                background: '#690005',
+                                color: palette.colors.OnError,
+                            },
+                            "&:disabled": {
+                                background: '#FFDAD6',
+                                color: palette.colors.OnError,
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "base" },
+                        style: {
+                            background: palette.colors.OnBackground,
+                            color: palette.colors.Background,
+                            "&:hover": {
+                                background: '#313033',
+                                color: palette.colors.Background,
+                            },
+                            "&:focus": {
+                                background: '#48464A',
+                                color: palette.colors.Background,
+                            },
+                            "&:active": {
+                                background: '#79767A',
+                                color: palette.colors.Background,
+                            },
+                            "&:disabled": {
+                                background: '#D9D9D9',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                ]
+            },
+        }
+    },
+    faIR
+);
+export const DarkTheme = createTheme(
+    {
+        direction: 'rtl',
+        shape,
+        overrides,
+        palette: darkpallete,
+        shadows,
+        typography,
+        props: {
+            MuiTextField: {
+                InputLabelProps: {
+                    shrink: true,
+                },
+            },
+            MuiAutocomplete: {
+                disablePortal: true,
+
+            },
+        },
+        components: {
+            MuiButton: {
+                defaultProps: {
+                    variant: "contained"
+                },
+                styleOverrides: {
+                    sizeSmall: {
+                        fontSize: 14,
+                        padding: "8px 16px",
+                        fontVariationSettings: "'wght' 400",
+                        letterSpacing: '-0.04em'
+
+                    },
+                    sizeMedium: {
+                        padding: "8px 24px",
+                        fontSize: 16,
+                        fontVariationSettings: "'wght' 600",
+                        letterSpacing: '-0.04em'
+                    },
+                    sizeLarge: {
+                        padding: "8px 24px",
+                        fontSize: 24,
+                        fontVariationSettings: "'wght' 700",
+                        letterSpacing: '-0.04em'
+                    },
+                },
+                variants: [
+                    {
+                        props: { variant: "primary" },
+                        style: {
+                            background: palette.colors.Primary_Container,
+                            color: palette.colors.On_Primary,
+                            "&:hover": {
+                                background: '#FD4E87',
+                                color: palette.colors.On_Primary,
+                            },
+                            "&:focus": {
+                                background: '#FF85A4',
+                                color: palette.colors.On_Primary_Container,
+                            },
+                            "&:active": {
+                                background: '#FFB1C2',
+                                color: palette.colors.Surface,
+                            },
+                            "&:disabled": {
+                                background: '#313033',
+                                color: '#48464A',
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "surface" },
+                        style: {
+                            background: palette.colors.Surface,
+                            color: palette.colors.OnBackground,
+                            "&:hover": {
+                                background: '#313033',
+                                color: palette.colors.OnBackground,
+                            },
+                            "&:focus": {
+                                background: '#48464A',
+                                color: palette.colors.OnBackground,
+                            },
+                            "&:active": {
+                                background: '#605D62',
+                                color: palette.colors.OnBackground,
+                            },
+                            "&:disabled": {
+                                background: '#313033',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "error" },
+                        style: {
+                            background: palette.colors.Error,
+                            color: palette.colors.OnError,
+                            "&:hover": {
+                                background: '#FF897D',
+                                color: palette.colors.OnError,
+                            },
+                            "&:focus": {
+                                background: '#DE3730',
+                                color: palette.colors.OnError,
+                            },
+                            "&:active": {
+                                background: '#BA1A1A',
+                                color: palette.colors.On_Error_Container,
+                            },
+                            "&:disabled": {
+                                background: '#410002',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                    {
+                        props: { variant: "base" },
+                        style: {
+                            background: palette.colors.OnBackground,
+                            color: palette.colors.Background,
+                            "&:hover": {
+                                background: '#E6E1E6',
+                                color: palette.colors.Background,
+                            },
+                            "&:focus": {
+                                background: '#AEAAAE',
+                                color: palette.colors.Background,
+                            },
+                            "&:active": {
+                                background: '#48464A',
+                                color: palette.colors.OnBackground,
+                            },
+                            "&:disabled": {
+                                background: '#313033',
+                                color: palette.colors.Background,
+                            }
+                        }
+                    },
+                ]
+            }
+        }
+    },
+    faIR
+);
+
--- a/src/themes/overrides.js
+++ b/src/themes/overrides.js
@ -0,0 +1,56 @@
+import palette from './palette';
+
+const overrides = {
+  MuiCssBaseline: {
+    '@global': {
+      a: {
+        textDecoration: 'none',
+        color: palette.primary.main.color,
+      },
+      code: {
+        color: palette.primary.main.color,
+      },
+      '::-webkit-scrollbar': {
+        width: '8px',
+        height: '8px',
+      },
+
+    },
+  },
+  MuiTextField: {
+    root: {
+      '& .MuiOutlinedInput-root': {
+
+        '& fieldset': {
+          borderRadius: 100,
+        },
+      },
+    },
+  },
+  MuiButton: {
+    contained: {
+      backgroundColor: palette.primary.main,
+      color: palette.primary.contrastText,
+      "&:hover": {
+        backgroundColor: palette.primary.hover,
+      },
+      "&:focused": {
+        backgroundColor: palette.primary.focused
+      },
+      "&:selected": {
+        backgroundColor:  palette.primary.press
+      },
+    },
+    outlined: {
+      color: palette.primary.main.color,
+      "&:hover": {
+        backgroundColor: palette.primary.main.backgroundColor,
+      },
+    },
+  },
+  MuiSlider:{
+    backgroundColor:'green'
+  }	
+};
+
+export default overrides;
--- a/src/themes/palette-dark.js
+++ b/src/themes/palette-dark.js
@ -0,0 +1,163 @@
+export const TonalPalletes = {
+  primary: {
+    0: "#000000",
+    10: "#00026C",
+    20: "#0004AA",
+    30: "#0D16E3",
+    40: "#3540F9",
+    50: "#5964FF",
+    60: "#7B85FF",
+    70: "#9DA4FF",
+    80: "#BEC2FF",
+    90: "#E0E0FF",
+    95: "#F1EFFF",
+    99: "#FFFBFF",
+    100: "#FFFFFF"
+  },
+  secondary: {
+    0: "#000000",
+    10: "#2A1700",
+    20: "#462A00",
+    30: "#653E00",
+    40: "#855400",
+    50: "#A66A00",
+    60: "#C98100",
+    70: "#ED9900",
+    80: "#FFB95D",
+    90: "#FFDDB7",
+    95: "#FFEEDE",
+    99: "#FFFBFF",
+    100: "#FFFFFF"
+  },
+  error: {
+    0: "#000000",
+    10: "#410002",
+    20: "#690005",
+    30: "#93000A",
+    40: "#BA1A1A",
+    50: "#DE3730",
+    60: "#FF5449",
+    70: "#FF897D",
+    80: "#FFB4AB",
+    90: "#FFDAD6",
+    95: "#FFEDEA",
+    99: "#FFFBFF",
+    100: "#FFFFFF"
+  },
+  neutral: {
+    0: "#000000",
+    10: "#1B1B1F",
+    20: "#303034",
+    30: "#47464A",
+    40: "#5F5E62",
+    50: "#78767A",
+    60: "#929094",
+    70: "#ADAAAF",
+    80: "#C8C5CA",
+    90: "#E5E1E6",
+    95: "#F3EFF4",
+    99: "#FFFBFF",
+    100: "#FFFFFF"
+  },
+  neutral_variants: {
+    0: "#000000",
+    10: "#1B1B23",
+    20: "#303038",
+    30: "#46464F",
+    40: "#5E5D67",
+    50: "#777680",
+    60: "#91909A",
+    70: "#ACAAB4",
+    80: "#C7C5D0",
+    90: "#E3E1EC",
+    95: "#F2EFFA",
+    99: "#FFFBFF",
+    100: "#FFFFFF"
+  }
+
+};
+const pallete = {
+  mode: 'dark',
+  Background: '#1B1B23',
+
+  primary: {
+    main: TonalPalletes.primary[80],
+    OnPrimary: {
+      backgroundColor: TonalPalletes.primary[20],
+      color: TonalPalletes.primary[80]
+    },
+    PrimaryContainer: {
+      backgroundColor: TonalPalletes.primary[30],
+      color: TonalPalletes.primary[70]
+    },
+    OnPrimaryContainer: {
+      backgroundColor: TonalPalletes.primary[90],
+      color: TonalPalletes.primary[10]
+    }
+  },
+  secondary: {
+    main: TonalPalletes.secondary[80],
+    OnSecondary: {
+      backgroundColor: TonalPalletes.secondary[20],
+      color: TonalPalletes.secondary[80]
+    },
+    SecondaryContainer: {
+      backgroundColor: TonalPalletes.secondary[30],
+      color: TonalPalletes.secondary[70]
+    },
+    OnSecondaryContainer: {
+      backgroundColor: TonalPalletes.secondary[90],
+      color: TonalPalletes.secondary[10]
+    }
+  },
+  error: {
+    main: TonalPalletes.error[80],
+    OnError: {
+      backgroundColor: TonalPalletes.error[20],
+      color: TonalPalletes.error[80]
+    },
+    ErrorContainer: {
+      backgroundColor: TonalPalletes.error[30],
+      color: TonalPalletes.error[70]
+    },
+    OnErrorContainer: {
+      backgroundColor: TonalPalletes.error[90],
+      color: TonalPalletes.error[10]
+    }
+  },
+  neutral: {
+    Background: {
+      backgroundColor: TonalPalletes.neutral[10],
+      color: TonalPalletes.neutral[90]
+    },
+    OnBackground: {
+      backgroundColor: TonalPalletes.neutral[90],
+      color: TonalPalletes.neutral[10]
+    },
+    Surface: {
+      backgroundColor: TonalPalletes.neutral[10],
+      color: TonalPalletes.neutral[90]
+    },
+    OnSurface: {
+      backgroundColor: TonalPalletes.neutral[80],
+      color: TonalPalletes.neutral[20]
+    }
+  },
+  neutral_variants: {
+    SurfaceVariant: {
+      backgroundColor: TonalPalletes.neutral_variants[30],
+      color: TonalPalletes.neutral_variants[70]
+    },
+    OnSurfaceVariant: {
+      backgroundColor: TonalPalletes.neutral_variants[80],
+      color: TonalPalletes.neutral_variants[20]
+    },
+    Outline: {
+      backgroundColor: TonalPalletes.neutral_variants[60],
+      color: TonalPalletes.neutral_variants[40]
+    },
+
+  }
+}
+
+export default pallete;
--- a/src/themes/palette.js
+++ b/src/themes/palette.js
@ -0,0 +1,20 @@
+import { colors } from './LightColors'
+const palette = {
+  mode: 'light',
+  primary: {
+    main: '#ec407a',
+  },
+  secondary: {
+    main: '#efefef',
+  },
+  info: {
+    main: '#1c1b1e',
+  },
+  error: {
+    main: '#ba1a1a',
+  },
+  colors
+}
+
+export default palette;
+
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`google-site-verification: google6394b6002bc6a226.html`