structure and heropage

2025-03-24 23:38:21 +03:30
parent 8b648598d0
commit 0c248508bc
72 changed files with 542 additions and 131 deletions
@@ -8,9 +8,12 @@
      "name": "danak-website",
      "version": "0.1.0",
      "dependencies": {
+        "iconsax-react": "^0.0.8",
        "next": "15.2.3",
        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-spinners": "^0.15.0",
+        "tailwind-merge": "^3.0.2"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
@@ -3274,6 +3277,18 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/iconsax-react": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz",
+      "integrity": "sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/ignore": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3767,7 +3782,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -4143,7 +4157,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -4327,7 +4340,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4626,7 +4638,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -4690,9 +4701,18 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
+    "node_modules/react-spinners": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
+      "integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/reflect.getprototypeof": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5317,6 +5337,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/tailwind-merge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
+      "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
    "node_modules/tailwindcss": {
      "version": "4.0.15",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz",
@@ -9,19 +9,22 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "iconsax-react": "^0.0.8",
+    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.2.3"
+    "react-spinners": "^0.15.0",
+    "tailwind-merge": "^3.0.2"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.2.3",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
  }
 }
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 961.6 222.5" style="enable-background:new 0 0 961.6 222.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1D1D1B;}
+</style>
+<g>
+	<g>
+		<g>
+			<g>
+				<path class="st0" d="M246,180.4h-8.7v24.3h-3.6v-24.3H225v-2.9h21V180.4z"/>
+				<path class="st0" d="M279.1,205c-2.7,0-5-0.9-6.7-2.7s-2.6-4.2-2.6-7.2v-0.6c0-2,0.4-3.8,1.1-5.4s1.8-2.8,3.2-3.7
+					s2.9-1.3,4.5-1.3c2.6,0,4.7,0.9,6.1,2.6c1.5,1.7,2.2,4.2,2.2,7.4v1.4h-13.7c0,2,0.6,3.6,1.7,4.8s2.5,1.8,4.2,1.8
+					c1.2,0,2.3-0.2,3.1-0.7s1.6-1.2,2.2-2l2.1,1.6C285,203.7,282.5,205,279.1,205z M278.7,186.9c-1.4,0-2.6,0.5-3.5,1.5
+					s-1.5,2.4-1.8,4.3h10.1v-0.3c-0.1-1.8-0.6-3.1-1.4-4.1C281.3,187.4,280.1,186.9,278.7,186.9z"/>
+				<path class="st0" d="M320.4,202.2c1.2,0,2.3-0.4,3.2-1.1c0.9-0.7,1.4-1.7,1.5-2.8h3.3c-0.1,1.2-0.5,2.3-1.2,3.3
+					s-1.7,1.9-2.9,2.5c-1.2,0.6-2.5,0.9-3.9,0.9c-2.8,0-4.9-0.9-6.6-2.8c-1.6-1.8-2.4-4.3-2.4-7.5v-0.6c0-2,0.4-3.7,1.1-5.2
+					s1.8-2.7,3.1-3.6c1.4-0.8,2.9-1.3,4.8-1.3c2.3,0,4.1,0.7,5.6,2c1.5,1.4,2.3,3.1,2.4,5.3h-3.3c-0.1-1.3-0.6-2.4-1.5-3.2
+					s-2-1.3-3.3-1.3c-1.8,0-3.1,0.6-4.1,1.9s-1.4,3.1-1.4,5.5v0.7c0,2.3,0.5,4.1,1.4,5.4C317.2,201.6,318.6,202.2,320.4,202.2z"/>
+				<path class="st0" d="M357,186.9c1.5-1.9,3.5-2.8,6-2.8c4.3,0,6.4,2.4,6.5,7.2v13.4H366v-13.4c0-1.5-0.3-2.5-1-3.2s-1.7-1-3.1-1
+					c-1.1,0-2.1,0.3-3,0.9s-1.5,1.4-2,2.4v14.4h-3.4v-28.7h3.5V186.9z"/>
+				<path class="st0" d="M399.1,184.5l0.1,2.5c1.5-1.9,3.6-2.9,6.1-2.9c4.3,0,6.4,2.4,6.5,7.2v13.4h-3.5v-13.4c0-1.5-0.3-2.5-1-3.2
+					s-1.7-1-3.1-1c-1.1,0-2.1,0.3-3,0.9s-1.5,1.4-2,2.4v14.4h-3.5v-20.2h3.4V184.5z"/>
+				<path class="st0" d="M437.3,194.4c0-2,0.4-3.8,1.2-5.3c0.8-1.6,1.9-2.8,3.2-3.7s3-1.3,4.8-1.3c2.8,0,5,1,6.7,2.9
+					s2.5,4.4,2.5,7.6v0.2c0,2-0.4,3.7-1.1,5.3s-1.8,2.8-3.2,3.7c-1.4,0.9-3,1.3-4.8,1.3c-2.7,0-5-1-6.7-2.9s-2.5-4.4-2.5-7.6v-0.2
+					H437.3z M440.8,194.8c0,2.2,0.5,4,1.6,5.4c1,1.4,2.4,2,4.2,2c1.8,0,3.1-0.7,4.2-2.1s1.6-3.3,1.6-5.8c0-2.2-0.5-4-1.6-5.4
+					s-2.5-2.1-4.2-2.1s-3.1,0.7-4.1,2C441.3,190.3,440.8,192.3,440.8,194.8z"/>
+				<path class="st0" d="M485.1,204.7h-3.5V176h3.5V204.7z"/>
+				<path class="st0" d="M511,194.4c0-2,0.4-3.8,1.2-5.3c0.8-1.5,1.9-2.8,3.2-3.7c1.4-0.9,3-1.3,4.8-1.3c2.8,0,5,1,6.7,2.9
+					s2.5,4.4,2.5,7.6v0.2c0,2-0.4,3.7-1.1,5.3s-1.8,2.8-3.2,3.7s-3,1.3-4.8,1.3c-2.7,0-5-1-6.7-2.9c-1.7-1.9-2.5-4.4-2.5-7.6v-0.2
+					H511z M514.4,194.8c0,2.2,0.5,4,1.6,5.4c1,1.4,2.4,2,4.2,2s3.2-0.7,4.2-2.1c1-1.4,1.5-3.3,1.5-5.8c0-2.2-0.5-4-1.6-5.4
+					s-2.5-2.1-4.2-2.1s-3.1,0.7-4.1,2C515,190.3,514.4,192.3,514.4,194.8z"/>
+				<path class="st0" d="M554.1,194.4c0-3.2,0.7-5.7,2.2-7.5s3.4-2.8,5.8-2.8c2.5,0,4.4,0.9,5.8,2.6l0.2-2.2h3.2v19.7
+					c0,2.6-0.8,4.7-2.3,6.2c-1.6,1.5-3.6,2.3-6.2,2.3c-1.5,0-2.9-0.3-4.3-0.9c-1.4-0.6-2.5-1.5-3.2-2.6l1.8-2.1
+					c1.5,1.8,3.3,2.7,5.4,2.7c1.7,0,3-0.5,3.9-1.4s1.4-2.3,1.4-4v-1.7c-1.4,1.6-3.3,2.4-5.7,2.4s-4.3-1-5.7-2.9
+					S554.1,197.7,554.1,194.4z M557.6,194.8c0,2.3,0.5,4.1,1.4,5.4c0.9,1.3,2.2,2,3.9,2c2.2,0,3.8-1,4.8-3V190
+					c-1.1-1.9-2.6-2.9-4.8-2.9c-1.7,0-3,0.7-3.9,2C558.1,190.3,557.6,192.2,557.6,194.8z"/>
+				<path class="st0" d="M604.3,199.6l4.7-15.1h3.7l-8.1,23.3c-1.3,3.4-3.3,5-6,5l-0.7-0.1l-1.3-0.2v-2.8l0.9,0.1
+					c1.2,0,2.1-0.2,2.7-0.7c0.7-0.5,1.2-1.3,1.6-2.6l0.8-2.1l-7.2-20h3.8L604.3,199.6z"/>
+				<path class="st0" d="M688.3,196c-0.3,2.9-1.4,5.1-3.2,6.7c-1.8,1.6-4.2,2.3-7.1,2.3c-3.2,0-5.8-1.2-7.7-3.5s-2.9-5.4-2.9-9.2
+					v-2.6c0-2.5,0.5-4.8,1.4-6.7s2.2-3.4,3.8-4.4s3.6-1.5,5.8-1.5c2.9,0,5.2,0.8,6.9,2.4c1.7,1.6,2.8,3.8,3,6.7h-3.6
+					c-0.3-2.2-1-3.7-2-4.7s-2.5-1.5-4.4-1.5c-2.3,0-4.1,0.8-5.4,2.5c-1.3,1.7-2,4.1-2,7.2v2.6c0,3,0.6,5.3,1.8,7s3,2.6,5.2,2.6
+					c2,0,3.5-0.5,4.6-1.4s1.8-2.5,2.1-4.7h3.7V196z"/>
+				<path class="st0" d="M713,194.4c0-2,0.4-3.8,1.2-5.3s1.9-2.8,3.2-3.7c1.4-0.9,3-1.3,4.8-1.3c2.8,0,5,1,6.7,2.9s2.5,4.4,2.5,7.6
+					v0.2c0,2-0.4,3.7-1.1,5.3s-1.8,2.8-3.2,3.7s-3,1.3-4.8,1.3c-2.7,0-5-1-6.7-2.9s-2.5-4.4-2.5-7.6v-0.2H713z M716.5,194.8
+					c0,2.2,0.5,4,1.6,5.4c1,1.4,2.4,2,4.2,2s3.2-0.7,4.2-2.1c1-1.4,1.5-3.3,1.5-5.8c0-2.2-0.5-4-1.6-5.4s-2.5-2.1-4.2-2.1
+					s-3.1,0.7-4.1,2C717,190.3,716.5,192.3,716.5,194.8z"/>
+				<path class="st0" d="M760.3,184.5l0.1,2.2c1.5-1.7,3.5-2.6,6-2.6c2.8,0,4.8,1.1,5.8,3.2c0.7-1,1.5-1.8,2.6-2.4
+					c1.1-0.6,2.4-0.9,3.8-0.9c4.4,0,6.7,2.3,6.8,7v13.5h-3.5v-13.3c0-1.4-0.3-2.5-1-3.2s-1.8-1.1-3.3-1.1c-1.3,0-2.3,0.4-3.2,1.1
+					c-0.8,0.8-1.3,1.8-1.5,3.1v13.4h-3.5v-13.2c0-2.9-1.4-4.4-4.3-4.4c-2.3,0-3.8,1-4.7,2.9v14.8h-3.5v-20.2h3.4V184.5z"/>
+				<path class="st0" d="M828.9,194.8c0,3.1-0.7,5.6-2.1,7.4c-1.4,1.9-3.3,2.8-5.7,2.8c-2.5,0-4.4-0.8-5.8-2.3v9.7h-3.5v-28h3.2
+					l0.2,2.2c1.4-1.7,3.4-2.6,5.9-2.6c2.4,0,4.3,0.9,5.8,2.7c1.4,1.8,2.1,4.4,2.1,7.6v0.5H828.9z M825.5,194.4
+					c0-2.3-0.5-4.1-1.5-5.4c-1-1.3-2.3-2-4-2c-2.1,0-3.7,0.9-4.7,2.8v9.7c1,1.8,2.6,2.8,4.7,2.8c1.7,0,3-0.7,4-2
+					S825.5,197,825.5,194.4z"/>
+				<path class="st0" d="M867,204.7c-0.2-0.4-0.4-1.1-0.5-2.1c-1.6,1.7-3.5,2.5-5.8,2.5c-2,0-3.6-0.6-4.9-1.7s-1.9-2.6-1.9-4.3
+					c0-2.1,0.8-3.7,2.4-4.9c1.6-1.2,3.9-1.7,6.8-1.7h3.4v-1.7c0-1.2-0.4-2.2-1.1-2.9c-0.7-0.7-1.8-1.1-3.2-1.1
+					c-1.2,0-2.3,0.3-3.1,0.9c-0.8,0.6-1.3,1.4-1.3,2.3h-3.5c0-1,0.4-2,1.1-2.9c0.7-0.9,1.7-1.7,2.9-2.2s2.6-0.8,4-0.8
+					c2.3,0,4.2,0.6,5.5,1.7c1.3,1.2,2,2.8,2.1,4.8v9.3c0,1.9,0.2,3.3,0.7,4.4v0.3H867V204.7z M861.3,202c1.1,0,2.1-0.3,3.1-0.8
+					c1-0.6,1.7-1.3,2.1-2.2v-4.1h-2.7c-4.2,0-6.4,1.2-6.4,3.7c0,1.1,0.4,1.9,1.1,2.5C859.2,201.7,860.2,202,861.3,202z"/>
+				<path class="st0" d="M899.9,184.5l0.1,2.5c1.5-1.9,3.6-2.9,6.1-2.9c4.3,0,6.4,2.4,6.5,7.2v13.4h-3.5v-13.4c0-1.5-0.3-2.5-1-3.2
+					s-1.7-1-3.1-1c-1.1,0-2.1,0.3-3,0.9s-1.5,1.4-2,2.4v14.4h-3.5v-20.2h3.4V184.5z"/>
+				<path class="st0" d="M945.6,199.6l4.7-15.1h3.7l-8.1,23.3c-1.3,3.4-3.3,5-6,5l-0.7-0.1l-1.3-0.2v-2.8l0.9,0.1
+					c1.2,0,2.1-0.2,2.7-0.7c0.7-0.5,1.2-1.3,1.6-2.6l0.8-2.1l-7.2-20h3.8L945.6,199.6z"/>
+			</g>
+		</g>
+		<path class="st0" d="M221.6,148.7V44.1h29.5c9.1,0,17.1,2,24.1,6s12.4,9.7,16.2,17.2c3.8,7.4,5.7,15.9,5.8,25.6v6.7
+			c0,9.9-1.9,18.5-5.7,25.9c-3.8,7.4-9.2,13.1-16.3,17.1c-7.1,4-15.3,6-24.7,6.1L221.6,148.7L221.6,148.7z M235.4,55.4v82h14.5
+			c10.6,0,18.9-3.3,24.8-9.9c5.9-6.6,8.9-16,8.9-28.3v-6.1c0-11.9-2.8-21.1-8.4-27.7s-13.5-9.9-23.7-10L235.4,55.4L235.4,55.4z"/>
+		<path class="st0" d="M627.1,148.7h-13.9l-52.7-80.6v80.6h-13.9V44.1h13.9l52.8,81v-81H627v104.6H627.1z"/>
+		<path class="st0" d="M900.9,100.1l-12.8,13.3v35.3h-13.8V44.1h13.8v51.7l46.5-51.7h16.7l-41.2,46.2l44.4,58.4H938L900.9,100.1z"/>
+		<polygon class="st0" points="423.2,61.1 455.1,148.7 469.2,148.7 429.2,44.1 417.1,44.1 377.2,148.7 391.4,148.7 		"/>
+		<polygon class="st0" points="750.6,61.1 782.6,148.7 796.7,148.7 756.7,44.1 744.6,44.1 704.7,148.7 718.9,148.7 		"/>
+	</g>
+	<path class="st0" d="M132.1,140.4c0,0-26.1,25.2-48,46.5v28.9c-2.2,1.7,77.6-75.4,77.6-75.4L84.1,59v31L132.1,140.4z"/>
+	<g>
+		<polygon class="st0" points="83.7,157.5 6.5,75.1 7.5,74.2 84.7,156.6 		"/>
+		<polygon class="st0" points="83.7,149.8 13.6,75.2 14.6,74.3 84.6,148.9 		"/>
+		<polygon class="st0" points="83.7,142.1 20.7,75.4 21.7,74.4 84.6,141.1 		"/>
+		<polygon class="st0" points="83.6,134.3 27.8,75.5 28.7,74.6 84.6,133.4 		"/>
+		<polygon class="st0" points="83.6,126.6 34.9,75.6 35.8,74.7 84.6,125.7 		"/>
+	</g>
+	<g>
+		<polygon class="st0" points="8,75.5 7.1,74.5 83.7,0 84.6,0.9 		"/>
+		<polygon class="st0" points="15.2,75.5 14.3,74.6 83.6,7 84.5,7.9 		"/>
+		<polygon class="st0" points="22.4,75.6 21.4,74.7 83.6,14 84.5,14.9 		"/>
+		<polygon class="st0" points="29.5,75.6 28.6,74.7 83.5,21 84.4,22 		"/>
+		<polygon class="st0" points="36.7,75.7 35.7,74.8 83.5,28 84.4,29 		"/>
+	</g>
+</g>
+</svg>
@@ -1,26 +1,54 @@
@import "tailwindcss";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+  direction: rtl;
+  max-width: 100%;
 }

 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: irancell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  direction: rtl;
+  background: #eceff6;
+  font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+html,
+body,
+#root {
+  min-height: 100% !important;
+  height: 100%;
+}
+* {
+  outline: none;
+}
+input::placeholder,
+textarea::placeholder {
+  color: #888888;
+}
+
+@theme {
+  --color-primary: black;
+  --spacing-maxWidth: 1280px;
+}
+
+tbody tr {
+  background-color: white;
+}
+
+.thead tr td:first-child {
+  border-top-right-radius: 23px;
+  /* border-bottom-right-radius: 23px; */
+}
+.thead tr td:last-child {
+  border-top-left-radius: 23px;
+  /* border-bottom-left-radius: 23px; */
 }
@@ -0,0 +1,9 @@
+import { FC } from 'react'
+
+const DanakSuggestedService: FC = () => {
+    return (
+        <div>DanakSuggestedService</div>
+    )
+}
+
+export default DanakSuggestedService
@@ -0,0 +1,31 @@
+import Button from '@/components/Button'
+import Image from 'next/image'
+import { FC } from 'react'
+
+const HeroSection: FC = () => {
+    return (
+        <div className='relative'>
+            <Image
+                src={'/images/banner.webp'}
+                alt='banner'
+                width={1920}
+                height={1080}
+                className='w-full rounded-4xl object-cover mt-14'
+            />
+
+            <div className='absolute flex items-center z-1 top-0 left-0 w-full h-full bg-black/10 rounded-4xl'>
+                <div className='max-w-maxWidth w-full mx-auto px-10 text-4xl text-white'>
+                    <p>داناک،</p>
+                    <p className='mt-5 font-bold'>تلفیق هنر و تکنولوژی</p>
+
+                    <Button
+                        className='mt-12 !w-fit px-10 bg-white !text-black'
+                        label='درباره ی ما'
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default HeroSection
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import '@/assets/fonts/irancell/style.css'

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -23,11 +24,13 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="fa">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
-        {children}
+        <div className="font-irancell p-16">
+          {children}
+        </div>
      </body>
    </html>
  );
@@ -1,103 +1,19 @@
-import Image from "next/image";
+import { NextPage } from 'next'
+import Header from '@/shared/Header'
+import HeroSection from './home/HeroSection'
+import DanakSuggestedService from './home/DanakSuggestedService'

-export default function Home() {
+const Home: NextPage = () => {
  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
+    <div>
+      <Header />
+
+      <HeroSection />
+
+      <DanakSuggestedService />

-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
    </div>
-  );
+  )
 }
+
+export default Home
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: "irancell";
+  font-style: thin;
+  font-weight: 200;
+  src: url("./irancell-extralight.ttf");
+}
+@font-face {
+  font-family: "irancell";
+  font-style: normal;
+  font-weight: 300;
+  src: url("./irancell-light.ttf");
+}
+@font-face {
+  font-family: "irancell";
+  font-style: thin;
+  font-weight: 600;
+  src: url("./irancell-bold.ttf");
+}
@@ -0,0 +1,143 @@
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraBoldItalic.ttf") format("truetype");
+  font-weight: 800;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 200;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  unicode-range: U+30-39;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  unicode-range: U+30-39;
+}
@@ -0,0 +1,36 @@
+import { ButtonHTMLAttributes, FC, memo, ReactNode } from 'react'
+import MoonLoader from "react-spinners/MoonLoader"
+import { XOR } from '../helpers/types'
+import { clx } from '../helpers/utils'
+
+type Props = {
+    className?: string;
+    isLoading?: boolean;
+    percentage?: number;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+    XOR<{ children: ReactNode }, { label: string }>;
+
+const Button: FC<Props> = memo((props) => {
+    const { isLoading, percentage, label, children, className, ...rest } = props;
+
+    const buttonClass = clx(
+        'flex rounded-xl items-center justify-center text-center h-10 text-sm bg-primary text-white w-full',
+        rest.disabled && 'cursor-not-allowed opacity-60'
+    );
+
+    return (
+        <button {...rest} className={`${buttonClass} ${className || ''}`} >
+            {isLoading ? (
+                <div className='flex gap-2 items-center'>
+                    {percentage && percentage > 0 ? <span>{percentage}%</span> : <MoonLoader size={20} color='#fff' />}
+                </div>
+            ) : (
+                label ?? children
+            )}
+        </button>
+    )
+})
+
+Button.displayName = 'Button'
+
+export default Button;
@@ -0,0 +1,20 @@
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+
+export type XOR<T, U> = T | U extends object
+  ? (Without<T, U> & U) | (Without<U, T> & T)
+  : T | U;
+
+export type ItemsSelectType = {
+  value: string;
+  label: string;
+};
+
+export type ErrorType = Error & {
+  response?: {
+    data?: {
+      error: {
+        message: string[];
+      };
+    };
+  };
+};
@@ -0,0 +1,11 @@
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Concatenates truthy classes into a space-separated string.
+ *
+ * @param classes - The classes to concatenate.
+ * @returns The concatenated classes.
+ */
+export const clx = (...classes: (string | boolean | undefined)[]): string => {
+  return twMerge(classes.filter(Boolean).join(" "));
+};
@@ -0,0 +1,72 @@
+import { FC } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Profile, SearchNormal } from 'iconsax-react'
+import Button from '@/components/Button'
+
+const Header: FC = () => {
+    return (
+        <div className='w-full h-[100px] bg-white/26 rounded-4xl border-[3px] border-white px-10'>
+            <div className='max-w-maxWidth mx-auto flex items-center justify-between h-full'>
+                <Image src='/images/logo.svg' alt='logo' width={150} height={40} />
+
+                <ul className='flex items-center gap-8 text-sm'>
+                    <Link href='/'>
+                        <li>
+                            خانه
+                        </li>
+                    </Link>
+
+                    <Link href='/'>
+                        <li>
+                            محصولات
+                        </li>
+                    </Link>
+
+                    <Link href='/'>
+                        <li>
+                            خدمات
+                        </li>
+                    </Link>
+
+                    <Link href='/'>
+                        <li>
+                            درباره ی ما
+                        </li>
+                    </Link>
+
+                    <Link href='/'>
+                        <li>
+                            مجله
+                        </li>
+                    </Link>
+                </ul>
+
+                <div className='flex  items-center gap-4 text-sm'>
+                    <div className='border-l-2 border-[#D8DCE4] pl-4'>
+                        <SearchNormal
+                            size={20}
+                            color='black'
+                        />
+                    </div>
+
+                    <div className='border-l-2 whitespace-nowrap border-[#D8DCE4] pl-4 flex gap-2'>
+                        <Profile
+                            size={20}
+                            color='black'
+                        />
+                        <div>ورود | ثبت نام</div>
+                    </div>
+
+                    <Button
+                        label='تماس با ما'
+                        className='w-fit px-8'
+                    />
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Header