feat : sidebar and duas added

1 month ago · 3b6bb420b6
25 changed files with 990 additions and 139 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,12 +8,17 @@
      "name": "duas",
      "version": "0.1.0",
      "dependencies": {
+        "axios": "^1.7.9",
+        "moment": "^2.30.1",
+        "moment-hijri": "^3.0.0",
        "next": "15.1.0",
        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-icons": "^5.4.0"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
+        "@types/moment-hijri": "^2.1.4",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
@ -862,6 +867,15 @@
      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
      "dev": true
    },
+    "node_modules/@types/moment-hijri": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@types/moment-hijri/-/moment-hijri-2.1.4.tgz",
+      "integrity": "sha512-pGX1DaSducJDkJAC3q8fCuemow0pzI4oa0iKcspwQNPXuwlI55WRgBVrA6NVi+rf8bZN1qjWVsGdUatrLhZk6Q==",
+      "dev": true,
+      "dependencies": {
+        "moment": ">=2.14.0"
+      }
+    },
    "node_modules/@types/node": {
      "version": "20.17.10",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz",
@ -1373,6 +1387,11 @@
      "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
      "dev": true
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
    "node_modules/available-typed-arrays": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@ -1397,6 +1416,16 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@ -1639,6 +1668,17 @@
        "simple-swizzle": "^0.2.2"
      }
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -1800,6 +1840,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/detect-libc": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@ -2586,6 +2634,25 @@
      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
      "dev": true
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/for-each": {
      "version": "0.3.3",
      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@ -2611,6 +2678,19 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@ -3586,6 +3666,25 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -3616,6 +3715,22 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-hijri": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/moment-hijri/-/moment-hijri-3.0.0.tgz",
+      "integrity": "sha512-UcBcbHDA8ToVcKjY+vBEa/hI3GZYraueavWUSLY2TdrHDHhx+wUpRw96rssAqsbT4xo/TMimwQVBP4KhJ3EN5A==",
+      "dependencies": {
+        "moment": "^2.30.1"
+      }
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -4177,6 +4292,11 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -4225,6 +4345,14 @@
        "react": "^19.0.0"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
@ -9,19 +9,24 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "axios": "^1.7.9",
+    "moment": "^2.30.1",
+    "moment-hijri": "^3.0.0",
+    "next": "15.1.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.1.0"
+    "react-icons": "^5.4.0"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@types/moment-hijri": "^2.1.4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
    "eslint": "^9",
    "eslint-config-next": "15.1.0",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
  }
 }
--- a/public/assets/images/Frame
+++ b/public/assets/images/Frame
--- a/public/assets/images/Group
+++ b/public/assets/images/Group
@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8946 24.0408C11.8522 23.9972 11.8069 23.949 11.7586 23.8979C11.65 23.7823 11.5263 23.6516 11.3979 23.5313C10.8158 22.9899 10.0973 22.5316 9.13644 22.089C8.87271 21.9676 8.59388 21.8351 8.33538 21.6637C7.58543 21.1682 7.12884 20.4764 6.97781 19.6073C6.972 19.5742 6.96619 19.5405 6.95922 19.5051C6.33358 19.465 5.82239 19.253 5.40124 18.8586C4.98357 18.4676 4.76631 17.9675 4.72274 17.2907C4.6966 17.2843 4.67046 17.2791 4.64432 17.2744C3.72765 17.1269 3.00153 16.6325 2.48743 15.8071C2.34104 15.5718 2.22486 15.3174 2.12204 15.0926C1.69391 14.1562 1.23907 13.4445 0.691274 12.8544C0.575674 12.7295 0.451362 12.6121 0.320078 12.4878C0.258502 12.4291 0.195765 12.3699 0.133027 12.3089L0 12.1799L0.137094 12.0556C0.176014 12.0202 0.214934 11.9859 0.253854 11.951C0.333438 11.8808 0.411279 11.8111 0.486215 11.7384C1.02762 11.211 1.49524 10.5493 1.91698 9.71457C1.98785 9.57399 2.05523 9.42644 2.11971 9.28354C2.15747 9.19989 2.19581 9.11682 2.23473 9.03375C2.47523 8.52198 2.77033 8.11941 3.13571 7.80398C3.56965 7.42988 4.06864 7.19694 4.61992 7.11096C4.65303 7.10574 4.68614 7.09935 4.72158 7.09179C4.75295 6.42608 4.96207 5.92127 5.37509 5.51232C5.76778 5.12311 6.27027 4.91515 6.9081 4.87856C6.91042 4.86752 6.91216 4.85706 6.91391 4.84602C6.9354 4.73043 6.95573 4.62122 6.9842 4.51201C7.19216 3.71152 7.68186 3.07311 8.43994 2.61536C8.645 2.49162 8.86283 2.39229 9.07428 2.29586L9.08822 2.28947C10.0467 1.85321 10.7711 1.39024 11.3677 0.831988C11.4885 0.719293 11.6018 0.599045 11.7215 0.471828C11.7772 0.412576 11.8342 0.352741 11.8922 0.292327L12.0206 0.159302L12.1455 0.295812C12.1833 0.337057 12.2205 0.378301 12.2571 0.419545C12.3343 0.5061 12.4075 0.587425 12.4842 0.665266C13.0721 1.25953 13.7883 1.74633 14.7381 2.19711C14.8037 2.22848 14.8705 2.25868 14.9368 2.28947C15.1377 2.38242 15.3451 2.47827 15.5421 2.5927C16.3576 3.06614 16.87 3.7487 17.0663 4.62063C17.0849 4.7037 17.0995 4.78735 17.1151 4.87623C17.7878 4.91922 18.2944 5.13067 18.6993 5.53556C19.0925 5.92883 19.3034 6.4255 19.358 7.09063H19.3621C19.4591 7.10806 19.5509 7.12375 19.6438 7.14582C20.4855 7.34507 21.1495 7.84116 21.6171 8.62131C21.7438 8.83218 21.8466 9.05641 21.9465 9.27309L21.9756 9.33582C22.3973 10.2507 22.8457 10.9472 23.386 11.5281C23.5027 11.6536 23.6271 11.771 23.7583 11.8953C23.8193 11.9528 23.8809 12.0115 23.9425 12.0707L24.0744 12.1985L23.939 12.3228C23.896 12.3629 23.8524 12.4012 23.81 12.4402C23.72 12.5215 23.6352 12.5976 23.5539 12.6783C22.9381 13.2906 22.4368 14.044 21.975 15.0484L21.9349 15.1361C21.857 15.3063 21.7769 15.4824 21.6822 15.6502C21.1588 16.5756 20.3932 17.124 19.4051 17.2797C19.3958 17.2814 19.3859 17.2826 19.3766 17.2843C19.2616 18.6297 18.4431 19.454 17.1593 19.5179C17.0239 20.4839 16.5034 21.2443 15.6123 21.7788C15.4166 21.8961 15.2086 21.9908 15.007 22.0826L14.9867 22.0919C14.1241 22.484 13.4258 22.9179 12.8513 23.4175C12.6869 23.5604 12.5237 23.7056 12.3605 23.8503L12.0113 24.1593L11.8957 24.0402L11.8946 24.0408Z" fill="#F4846F"/>
+<path d="M11.9645 14.9704C11.9539 14.9595 11.9426 14.9474 11.9306 14.9346C11.9035 14.9057 11.8727 14.8731 11.8407 14.843C11.6956 14.7077 11.5165 14.5931 11.2771 14.4824C11.2113 14.4521 11.1418 14.419 11.0774 14.3761C10.8905 14.2522 10.7767 14.0793 10.7391 13.862C10.7376 13.8537 10.7362 13.8453 10.7344 13.8365C10.5785 13.8264 10.4511 13.7734 10.3461 13.6748C10.242 13.5771 10.1879 13.452 10.177 13.2829C10.1705 13.2813 10.164 13.2799 10.1575 13.2788C9.92903 13.2419 9.74806 13.1183 9.61994 12.9119C9.58345 12.8531 9.5545 12.7895 9.52887 12.7333C9.42217 12.4992 9.30881 12.3213 9.17228 12.1738C9.14347 12.1425 9.11249 12.1132 9.07977 12.0821C9.06443 12.0675 9.04879 12.0526 9.03315 12.0374L9 12.0052L9.03417 11.9741C9.04387 11.9652 9.05357 11.9566 9.06327 11.9479C9.0831 11.9304 9.1025 11.9129 9.12118 11.8948C9.25611 11.7629 9.37266 11.5975 9.47776 11.3888C9.49543 11.3537 9.51222 11.3168 9.52829 11.2811C9.5377 11.2601 9.54726 11.2394 9.55696 11.2186C9.6169 11.0907 9.69044 10.99 9.78151 10.9112C9.88966 10.8176 10.014 10.7594 10.1514 10.7379C10.1597 10.7366 10.1679 10.735 10.1767 10.7331C10.1846 10.5667 10.2367 10.4405 10.3396 10.3383C10.4375 10.241 10.5627 10.189 10.7217 10.1798C10.7223 10.1771 10.7227 10.1744 10.7231 10.1717C10.7285 10.1428 10.7336 10.1155 10.7407 10.0882C10.7925 9.88806 10.9145 9.72845 11.1035 9.61401C11.1546 9.58308 11.2089 9.55825 11.2616 9.53414L11.265 9.53254C11.5039 9.42348 11.6845 9.30773 11.8331 9.16817C11.8633 9.14 11.8915 9.10994 11.9213 9.07813C11.9352 9.06332 11.9494 9.04836 11.9639 9.03326L11.9959 9L12.027 9.03413C12.0364 9.04444 12.0457 9.05475 12.0548 9.06506C12.0741 9.0867 12.0923 9.10703 12.1114 9.12649C12.2579 9.27506 12.4364 9.39676 12.6731 9.50945C12.6895 9.51729 12.7062 9.52485 12.7227 9.53254C12.7727 9.55578 12.8244 9.57974 12.8735 9.60835C13.0768 9.72671 13.2045 9.89735 13.2534 10.1153C13.258 10.1361 13.2617 10.157 13.2656 10.1792C13.4332 10.19 13.5595 10.2428 13.6604 10.3441C13.7584 10.4424 13.8109 10.5665 13.8246 10.7328H13.8256C13.8497 10.7372 13.8726 10.7411 13.8958 10.7466C14.1056 10.7964 14.271 10.9205 14.3876 11.1155C14.4192 11.1682 14.4448 11.2243 14.4697 11.2784L14.4769 11.2941C14.582 11.5229 14.6938 11.697 14.8284 11.8422C14.8575 11.8736 14.8885 11.9029 14.9212 11.934C14.9364 11.9484 14.9518 11.963 14.9671 11.9779L15 12.0098L14.9663 12.0409C14.9556 12.0509 14.9447 12.0605 14.9341 12.0702C14.9117 12.0905 14.8905 12.1096 14.8703 12.1298C14.7168 12.2828 14.5919 12.4712 14.4768 12.7223L14.4668 12.7442C14.4474 12.7868 14.4274 12.8308 14.4038 12.8727C14.2734 13.1041 14.0825 13.2412 13.8363 13.2801C13.834 13.2805 13.8315 13.2808 13.8292 13.2813C13.8005 13.6176 13.5965 13.8237 13.2766 13.8396C13.2428 14.0812 13.1131 14.2713 12.891 14.4049C12.8422 14.4342 12.7904 14.4579 12.7402 14.4808L12.7351 14.4831C12.5201 14.5812 12.3461 14.6897 12.2029 14.8145C12.1619 14.8503 12.1213 14.8866 12.0806 14.9227L11.9936 15L11.9647 14.9702L11.9645 14.9704Z" fill="white"/>
+</svg>
--- a/public/assets/images/Hosseiniye.svg
+++ b/public/assets/images/Hosseiniye.svg
--- a/public/assets/images/Inner
+++ b/public/assets/images/Inner
@ -0,0 +1,4 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.875 7.03125V3.79688C2.875 3.32031 3.06431 2.86327 3.40129 2.52629C3.73827 2.18931 4.19531 2 4.67188 2H8.081C8.43578 2.00001 8.78263 2.10505 9.07781 2.30188L10.3284 3.13562C10.6236 3.33245 10.9705 3.43749 11.3253 3.4375H18.3281C18.8047 3.4375 19.2617 3.62681 19.5987 3.96379C19.9357 4.30077 20.125 4.75781 20.125 5.23438V7.03125" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.9957 9.13375L20.3078 17.4063C20.3078 17.9361 20.1295 18.4443 19.812 18.8192C19.4945 19.1942 19.0637 19.4053 18.6143 19.4063H4.38566C3.93626 19.4053 3.50553 19.1942 3.18803 18.8192C2.87053 18.4443 2.69221 17.9361 2.69221 17.4063L2.00432 9.13375C1.98939 8.91359 2.01328 8.69216 2.0745 8.48342C2.13572 8.27468 2.23293 8.08314 2.36002 7.92086C2.4871 7.75858 2.64131 7.62909 2.81293 7.54052C2.98455 7.45195 3.16987 7.40624 3.35721 7.40625H19.647C19.834 7.40693 20.0189 7.45315 20.19 7.54202C20.3611 7.63089 20.5148 7.76049 20.6414 7.92269C20.7681 8.08489 20.8649 8.2762 20.9258 8.4846C20.9868 8.693 21.0106 8.914 20.9957 9.13375Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/assets/images/Setting.svg
+++ b/public/assets/images/Setting.svg
@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_8342_7611" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5397 3.02002C13.1603 3.02002 13.7635 3.27484 14.196 3.71774C14.6277 4.16325 14.866 4.7743 14.8478 5.39402C14.8496 5.53356 14.8955 5.69478 14.9787 5.83605C15.1165 6.07007 15.3341 6.23475 15.5924 6.30236C15.8507 6.3665 16.1211 6.33183 16.3508 6.19575C17.4602 5.56216 18.8721 5.9418 19.5057 7.04255L20.0457 7.97777C20.0595 8.0029 20.0717 8.02717 20.0821 8.0523C20.6559 9.13659 20.2728 10.5017 19.2067 11.1249C19.0515 11.2142 18.9258 11.339 18.8392 11.4898C18.7048 11.7229 18.6676 12.0003 18.7352 12.2551C18.8045 12.5151 18.97 12.731 19.2032 12.8644C19.7293 13.1669 20.1219 13.6766 20.2788 14.2651C20.4357 14.8527 20.3499 15.4907 20.0439 16.0168L19.4684 16.9754C18.8348 18.064 17.4229 18.441 16.3248 17.8066C16.1783 17.7225 16.0093 17.6766 15.8411 17.6722H15.8359C15.5854 17.6722 15.328 17.7788 15.1408 17.9652C14.951 18.155 14.847 18.4081 14.8487 18.6768C14.8426 19.95 13.8069 20.9797 12.5397 20.9797H11.4537C10.1804 20.9797 9.14469 19.9448 9.14469 18.6716C9.14296 18.5147 9.09789 18.3518 9.01382 18.2105C8.87774 17.973 8.65759 17.8031 8.40363 17.7355C8.15141 17.6679 7.87492 17.7052 7.64784 17.8369C7.10352 18.1403 6.463 18.214 5.87709 18.0493C5.29204 17.8837 4.78673 17.4816 4.49031 16.9485L3.94859 16.015C3.31501 14.916 3.69204 13.5076 4.78933 12.8731C5.10049 12.6937 5.29377 12.3591 5.29377 12.0003C5.29377 11.6415 5.10049 11.306 4.78933 11.1266C3.69117 10.4887 3.31501 9.07679 3.94773 7.97777L4.53538 7.01309C5.1603 5.92619 6.57308 5.5431 7.6747 6.17582C7.82465 6.26509 7.9876 6.31016 8.15314 6.31189C8.69312 6.31189 9.14469 5.86639 9.15336 5.31861C9.14989 4.71449 9.38825 4.13465 9.82248 3.69694C10.2585 3.26011 10.8374 3.02002 11.4537 3.02002H12.5397ZM12.5397 4.32013H11.4537C11.185 4.32013 10.9336 4.425 10.7438 4.61395C10.5549 4.80377 10.4517 5.05599 10.4535 5.32468C10.4353 6.59185 9.39951 7.612 8.14534 7.612C7.74318 7.60767 7.35574 7.49933 7.01945 7.29824C6.54708 7.02955 5.92996 7.1951 5.65347 7.67614L5.06669 8.64082C4.798 9.10713 4.96268 9.72338 5.44112 10.0016C6.15098 10.4124 6.59388 11.1786 6.59388 12.0003C6.59388 12.822 6.15098 13.5873 5.43939 13.999C4.96355 14.2746 4.79887 14.8874 5.07449 15.3641L5.6214 16.3071C5.75661 16.5507 5.97763 16.7266 6.23332 16.7986C6.48814 16.8696 6.76896 16.8393 7.00298 16.7093C7.34708 16.5073 7.74751 16.4025 8.14968 16.4025C8.34816 16.4025 8.54664 16.4276 8.74079 16.4796C9.32671 16.6374 9.83548 17.0291 10.1371 17.5552C10.333 17.8855 10.4413 18.2712 10.4448 18.6647C10.4448 19.228 10.8972 19.6796 11.4537 19.6796H12.5397C13.0936 19.6796 13.546 19.2306 13.5486 18.6768C13.5451 18.0649 13.7843 17.4833 14.222 17.0456C14.6537 16.614 15.2569 16.3548 15.8602 16.3721C16.2554 16.3817 16.6359 16.4883 16.9713 16.679C17.4541 16.9554 18.0704 16.7908 18.3495 16.3141L18.925 15.3546C19.0533 15.1336 19.0905 14.8562 19.022 14.6005C18.9544 14.3448 18.7846 14.1229 18.5557 13.9921C18.0201 13.6835 17.6379 13.186 17.4793 12.5897C17.3224 12.0046 17.4082 11.3658 17.7141 10.8397C17.9135 10.493 18.2056 10.201 18.5557 9.99987C19.0255 9.72511 19.1902 9.11059 18.9172 8.63215C18.9059 8.61308 18.8955 8.59315 18.8868 8.57235L18.3789 7.69174C18.1024 7.2107 17.4871 7.04515 17.0043 7.31991C16.4825 7.62847 15.8619 7.71688 15.2656 7.56C14.6702 7.40572 14.1709 7.02869 13.8598 6.49651C13.6604 6.16368 13.5521 5.77625 13.5486 5.38188C13.5564 5.08546 13.4524 4.81937 13.2634 4.62435C13.0754 4.4302 12.811 4.32013 12.5397 4.32013ZM12.0005 9.06474C13.6187 9.06474 14.9353 10.3822 14.9353 12.0004C14.9353 13.6186 13.6187 14.9343 12.0005 14.9343C10.3823 14.9343 9.06573 13.6186 9.06573 12.0004C9.06573 10.3822 10.3823 9.06474 12.0005 9.06474ZM12.0005 10.3649C11.0991 10.3649 10.3658 11.099 10.3658 12.0004C10.3658 12.9018 11.0991 13.6342 12.0005 13.6342C12.9019 13.6342 13.6352 12.9018 13.6352 12.0004C13.6352 11.099 12.9019 10.3649 12.0005 10.3649Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5397 3.02002C13.1603 3.02002 13.7635 3.27484 14.196 3.71774C14.6277 4.16325 14.866 4.7743 14.8478 5.39402C14.8496 5.53356 14.8955 5.69478 14.9787 5.83605C15.1165 6.07007 15.3341 6.23475 15.5924 6.30236C15.8507 6.3665 16.1211 6.33183 16.3508 6.19575C17.4602 5.56216 18.8721 5.9418 19.5057 7.04255L20.0457 7.97777C20.0595 8.0029 20.0717 8.02717 20.0821 8.0523C20.6559 9.13659 20.2728 10.5017 19.2067 11.1249C19.0515 11.2142 18.9258 11.339 18.8392 11.4898C18.7048 11.7229 18.6676 12.0003 18.7352 12.2551C18.8045 12.5151 18.97 12.731 19.2032 12.8644C19.7293 13.1669 20.1219 13.6766 20.2788 14.2651C20.4357 14.8527 20.3499 15.4907 20.0439 16.0168L19.4684 16.9754C18.8348 18.064 17.4229 18.441 16.3248 17.8066C16.1783 17.7225 16.0093 17.6766 15.8411 17.6722H15.8359C15.5854 17.6722 15.328 17.7788 15.1408 17.9652C14.951 18.155 14.847 18.4081 14.8487 18.6768C14.8426 19.95 13.8069 20.9797 12.5397 20.9797H11.4537C10.1804 20.9797 9.14469 19.9448 9.14469 18.6716C9.14296 18.5147 9.09789 18.3518 9.01382 18.2105C8.87774 17.973 8.65759 17.8031 8.40363 17.7355C8.15141 17.6679 7.87492 17.7052 7.64784 17.8369C7.10352 18.1403 6.463 18.214 5.87709 18.0493C5.29204 17.8837 4.78673 17.4816 4.49031 16.9485L3.94859 16.015C3.31501 14.916 3.69204 13.5076 4.78933 12.8731C5.10049 12.6937 5.29377 12.3591 5.29377 12.0003C5.29377 11.6415 5.10049 11.306 4.78933 11.1266C3.69117 10.4887 3.31501 9.07679 3.94773 7.97777L4.53538 7.01309C5.1603 5.92619 6.57308 5.5431 7.6747 6.17582C7.82465 6.26509 7.9876 6.31016 8.15314 6.31189C8.69312 6.31189 9.14469 5.86639 9.15336 5.31861C9.14989 4.71449 9.38825 4.13465 9.82248 3.69694C10.2585 3.26011 10.8374 3.02002 11.4537 3.02002H12.5397ZM12.5397 4.32013H11.4537C11.185 4.32013 10.9336 4.425 10.7438 4.61395C10.5549 4.80377 10.4517 5.05599 10.4535 5.32468C10.4353 6.59185 9.39951 7.612 8.14534 7.612C7.74318 7.60767 7.35574 7.49933 7.01945 7.29824C6.54708 7.02955 5.92996 7.1951 5.65347 7.67614L5.06669 8.64082C4.798 9.10713 4.96268 9.72338 5.44112 10.0016C6.15098 10.4124 6.59388 11.1786 6.59388 12.0003C6.59388 12.822 6.15098 13.5873 5.43939 13.999C4.96355 14.2746 4.79887 14.8874 5.07449 15.3641L5.6214 16.3071C5.75661 16.5507 5.97763 16.7266 6.23332 16.7986C6.48814 16.8696 6.76896 16.8393 7.00298 16.7093C7.34708 16.5073 7.74751 16.4025 8.14968 16.4025C8.34816 16.4025 8.54664 16.4276 8.74079 16.4796C9.32671 16.6374 9.83548 17.0291 10.1371 17.5552C10.333 17.8855 10.4413 18.2712 10.4448 18.6647C10.4448 19.228 10.8972 19.6796 11.4537 19.6796H12.5397C13.0936 19.6796 13.546 19.2306 13.5486 18.6768C13.5451 18.0649 13.7843 17.4833 14.222 17.0456C14.6537 16.614 15.2569 16.3548 15.8602 16.3721C16.2554 16.3817 16.6359 16.4883 16.9713 16.679C17.4541 16.9554 18.0704 16.7908 18.3495 16.3141L18.925 15.3546C19.0533 15.1336 19.0905 14.8562 19.022 14.6005C18.9544 14.3448 18.7846 14.1229 18.5557 13.9921C18.0201 13.6835 17.6379 13.186 17.4793 12.5897C17.3224 12.0046 17.4082 11.3658 17.7141 10.8397C17.9135 10.493 18.2056 10.201 18.5557 9.99987C19.0255 9.72511 19.1902 9.11059 18.9172 8.63215C18.9059 8.61308 18.8955 8.59315 18.8868 8.57235L18.3789 7.69174C18.1024 7.2107 17.4871 7.04515 17.0043 7.31991C16.4825 7.62847 15.8619 7.71688 15.2656 7.56C14.6702 7.40572 14.1709 7.02869 13.8598 6.49651C13.6604 6.16368 13.5521 5.77625 13.5486 5.38188C13.5564 5.08546 13.4524 4.81937 13.2634 4.62435C13.0754 4.4302 12.811 4.32013 12.5397 4.32013ZM12.0005 9.06474C13.6187 9.06474 14.9353 10.3822 14.9353 12.0004C14.9353 13.6186 13.6187 14.9343 12.0005 14.9343C10.3823 14.9343 9.06573 13.6186 9.06573 12.0004C9.06573 10.3822 10.3823 9.06474 12.0005 9.06474ZM12.0005 10.3649C11.0991 10.3649 10.3658 11.099 10.3658 12.0004C10.3658 12.9018 11.0991 13.6342 12.0005 13.6342C12.9019 13.6342 13.6352 12.9018 13.6352 12.0004C13.6352 11.099 12.9019 10.3649 12.0005 10.3649Z" fill="white" stroke="white" stroke-width="4" mask="url(#path-1-inside-1_8342_7611)"/>
+</svg>
--- a/public/assets/images/Untitled-1-02.svg
+++ b/public/assets/images/Untitled-1-02.svg
--- a/public/assets/images/Vector.svg
+++ b/public/assets/images/Vector.svg
@ -0,0 +1,3 @@
+<svg width="129" height="21" viewBox="0 0 129 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2526 21C8.4963 21 8.05628 19.252 7.98634 18.6609C5.7896 18.495 5.53631 16.8087 5.51187 16.2647C4.91974 16.167 3.11278 15.6853 2.29995 13.3966C1.67794 11.8944 0.195567 10.6609 0.180628 10.6491L5.0251e-07 10.4997L0.180628 10.3509C0.195567 10.3384 1.67794 9.10496 2.29588 7.61259C3.1121 5.31604 4.91906 4.833 5.51187 4.73534C5.53564 4.19135 5.78892 2.50498 7.98565 2.33916C8.05424 1.7565 8.48951 -3.38924e-07 11.2519 -4.49206e-07L117.747 -8.17426e-07C119.416 -8.84035e-07 120.217 0.659343 120.595 1.21251C120.894 1.64901 120.986 2.09273 121.014 2.33916C123.21 2.50498 123.464 4.19134 123.487 4.73533C124.08 4.83299 125.887 5.31472 126.7 7.60341C127.322 9.10561 128.804 10.3384 128.819 10.3509L129 10.5003L128.819 10.6491C128.804 10.6616 127.322 11.895 126.704 13.3874C125.888 15.684 124.08 16.167 123.488 16.2647C123.464 16.8087 123.211 18.495 121.014 18.6608C120.946 19.2435 120.51 21 117.748 21L11.2526 21Z" fill="#F6D9D4"/>
+</svg>
--- a/public/assets/images/send-01.svg
+++ b/public/assets/images/send-01.svg
@ -0,0 +1,3 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.999 18.5002L27.999 4.50023M14.1691 18.9377L17.6733 27.9483C17.982 28.7421 18.1363 29.139 18.3587 29.2549C18.5515 29.3553 18.7812 29.3555 18.9741 29.2552C19.1967 29.1396 19.3515 28.7429 19.6611 27.9495L28.4482 5.43249C28.7277 4.71625 28.8675 4.35813 28.791 4.1293C28.7247 3.93056 28.5687 3.77461 28.37 3.70822C28.1411 3.63177 27.783 3.77152 27.0668 4.05103L4.54978 12.8382C3.75635 13.1478 3.35963 13.3026 3.24402 13.5251C3.14379 13.7181 3.14393 13.9477 3.24438 14.1405C3.36025 14.3629 3.75715 14.5173 4.55094 14.826L13.5616 18.3301C13.7227 18.3928 13.8033 18.4241 13.8712 18.4725C13.9313 18.5154 13.9839 18.568 14.0268 18.6281C14.0752 18.696 14.1065 18.7765 14.1691 18.9377Z" stroke="#212121" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/fonts/KFGQPC
+++ b/public/fonts/KFGQPC
--- a/src/api/http.tsx
+++ b/src/api/http.tsx
@ -0,0 +1,13 @@
+import axios from 'axios';
+
+const http = axios.create({
+  baseURL: 'http://88.99.212.243:7051',
+  // headers: {
+  //   'Authorization': 'Token 36d8be53bed5cab8027b66952b3f2c334cdca664',
+  // },
+  params :{
+    language_code:"en"
+  }
+});
+
+export default http;
--- a/src/components/language-switcher.tsx
+++ b/src/components/language-switcher.tsx
@ -0,0 +1,76 @@
+"use client"
+
+import React, { useState, useRef, useEffect } from 'react';
+import { IoGlobeSharp } from "react-icons/io5";
+import { IoIosArrowDown } from "react-icons/io";
+
+const LanguageSwitcher = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedLanguage, setSelectedLanguage] = useState('English');
+  
+  // Explicitly define the type of wrapperRef
+  const wrapperRef = useRef<HTMLDivElement | null>(null);  // <-- Specify the type here
+
+  const languages = [
+    'English',
+    'Spanish',
+    'French',
+    'German',
+    'Chinese',
+  ];
+
+  const toggleDropdown = () => {
+    setIsOpen(prevState => !prevState);
+  };
+
+  const selectLanguage = (lang: React.SetStateAction<string>) => {
+    setSelectedLanguage(lang);
+    setIsOpen(false);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {  // Changed the type here for event
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) { // Cast target to Node
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="relative inline-block font-sans" ref={wrapperRef}>
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center px-3 py-2 h-11 border-gray-300 rounded-2xl bg-[#EBEBEB] text-black hover:bg-gray-50 focus:outline-none text-sm font-semibold"
+      >
+        <IoGlobeSharp color='black' size={25} className="mr-2" />
+        {selectedLanguage}
+        <span
+          className={`ml-2 transform transition-transform duration-200 ${isOpen ? 'rotate-180' : 'rotate-0'}`}
+        >
+          <IoIosArrowDown color='black' />
+        </span>
+      </button>
+
+      {isOpen && (
+        <ul className="absolute left-0 mt-1 w-full bg-white border border-gray-200 rounded shadow-lg z-50">
+          {languages.map(lang => (
+            <li
+              key={lang}
+              className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+              onClick={() => selectLanguage(lang)}
+            >
+              {lang}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default LanguageSwitcher;
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@ -0,0 +1,47 @@
+import Logo from "../../../public/assets/images/Hosseiniye.svg";
+import Image from "next/image";
+import Link from "next/link";
+import LanguageSwitcher from "../language-switcher";
+import { HiMiniMagnifyingGlass } from "react-icons/hi2";
+const Header = () => {
+  return (
+    <header className="w-full shadow-sm sticky top-0 bg-white">
+      <div className="max-w-[1440px] h-20 m-auto flex justify-between w-full px-11 items-center">
+        <div className="flex gap-11 h-full items-center">
+          <div>
+            <Image src={Logo} alt="Logo" />
+          </div>
+          <div className="h-full">
+            <ul className="flex gap-11 font-semibold text-[#4D4D4D] h-full items-center">
+              <li className="h-full flex items-center border-[#c79389] hover:border-b hover:text-[#EB6E57] ">
+                <Link href={"#"}>Home</Link>
+              </li>
+              <li className="h-full flex items-center border-[#F4846F] hover:border-b hover:text-[#EB6E57] ">
+                <Link href={"#"}>About us</Link>
+              </li>
+              <li className="h-full flex items-center border-[#F4846F] hover:border-b hover:text-[#EB6E57] ">
+                <Link href={"#"}>Last Read</Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="flex gap-6 h-11">
+          <div className="flex items-center w-64 h-11 px-4 rounded-2xl gap-3 bg-[#EBEBEB]">
+            <label htmlFor="input">
+              <HiMiniMagnifyingGlass size={24} />
+            </label>
+            <input
+              id="input"
+              placeholder="Type a title or keyword to search"
+              className="text-xs bg-[#EBEBEB] w-full"
+            />
+          </div>
+          <div>
+            <LanguageSwitcher />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@ -0,0 +1,16 @@
+import Tabs from "../sidebar/tabs";
+
+function SideBar() {
+  return (
+    <aside className="w-min h-[80vh] self-start overflow-auto bg-[#F5F5F5] rounded-3xl shadow-lg p-6">
+      <Tabs/>
+    </aside>
+  );
+}
+
+export default SideBar;
+
+// <aside className="w-64 h-[94vh] sticky top-4 self-start overflow-auto bg-gray-50 rounded-lg shadow-lg p-4">
+
+//   <Table categories ={categories}/>
+// </aside>
--- a/src/components/sidebar/list.tsx
+++ b/src/components/sidebar/list.tsx
@ -0,0 +1,176 @@
+"use client";
+import http from "@/api/http";
+import Image from "next/image";
+import categoryImage  from "../../../public/assets/images/Group 27009.svg";
+import DayContainer from "../../../public/assets/images/Vector.svg";
+import Folder from "../../../public/assets/images/Inner Plugin Iframe.svg";
+import NoData from "../../../public/assets/images/Frame 1000005074.svg";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import colorizeVowels from "../utils/colorize-vowels";
+import { formatHijriDate } from "../utils/date-formaters";
+
+// Define types for the data being handled
+interface Category {
+  id: number;
+  name: string;
+  children: Category[];
+}
+
+interface Dua {
+  id: number;
+  name: string;
+  slug: string;
+}
+
+interface ListProps {
+  tab: string; // You can specify other tabs if required
+}
+
+type DataState = {
+  type: "Categories" | "children" | "Today" | null;
+  data: Category[] | Dua[] | [];
+};
+
+const List: React.FC<ListProps> = ({ tab }) => {
+  const [data, setData] = useState<DataState>({ type: null, data: [] });
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [path, setPath] = useState<{ name: string; type: string; data?: Category[] }[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const router = useRouter();
+
+  const today = new Date();
+  const dayOfWeek = new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(today);
+
+  const openCategory = (category: Category) => {
+    setData({ type: "children", data: category.children });
+    setPath((prev) => [
+      ...prev,
+      { name: category.name, type: "children", data: category.children },
+    ]);
+  };
+
+  const openDua = (dua: Dua) => {
+    setPath((prev) => [...prev, { name: dua.name, type: "dua" }]);
+    router.push(`/duas/${dua.slug}-${dua.id}`);
+  };
+
+  useEffect(() => {
+    setData({ type: null, data: [] });
+    if (tab === "Categories") {
+      setLoading(true);
+      http.get("web/mafatih-categories/").then((res) => {
+        setData({ type: "Categories", data: res.data });
+        setPath((prev) => [...prev, { name: "", type: "Categories", data: res.data }]);
+        setLoading(false);
+      });
+    }
+    if (tab === "Today") {
+      // For "Today" tab, you can uncomment and make the API call to get today's data
+      // http.get("https://www.habibapp.com/web/mafatih-duas/?today=true").then((res) => {
+      //     console.log(res);
+      // })
+    }
+  }, [tab]);
+
+  if (loading) {
+    return <p>Loading ...</p>;
+  }
+
+  return (
+    <div>
+      {tab === "Today" && (
+        <div className="flex items-center flex-col">
+          <p className="text-xs text-[#8B8B8B] m-6">{formatHijriDate(today)}</p>
+          <div className="flex w-full flex-col items-center bg-[#FDF6F6] rounded-xl p-[1px] relative">
+            {/* Gradient Border */}
+            <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-[#FE7F781B] to-[#EA6D564D] opacity-50"></div>
+
+            {/* Inner Content */}
+            <div className="relative w-full h-full bg-white rounded-xl flex items-center flex-col p-4">
+              {/* Date */}
+              <div className="absolute top-[-13px]">
+                <div className="relative w-40 flex justify-center items-center mb-6">
+                  {/* Background Image */}
+                  <Image
+                    src={DayContainer}
+                    alt="Day Container"
+                    className="rounded-full w-full h-full object-cover"
+                  />
+                  {/* Centered Text */}
+                  <p className="absolute text-center text-[#EE755F] font-medium text-sm">
+                    {dayOfWeek}&apos;s Dhikr
+                  </p>
+                </div>
+              </div>
+
+              {/* Arabic Dhikr */}
+              <div className="text-2xl mt-1 text-[#292524] font-[UthmanTaha] mb-2 leading-relaxed">
+                {colorizeVowels("یا أَرْحَمَ الرَّاحِمِین")}
+              </div>
+
+              {/* English Translation */}
+              <p className="text-sm text-[#8B8B8B]">
+                O Most Merciful of all givers
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+      {data.data.length ? (
+        data.data.map((item: Category | Dua) => {
+          if (data.type === "Categories" && (item as Category).children?.length) {
+            const category = item as Category;
+            return (
+              <div
+                className="flex justify-between p-3 bg-white my-4 rounded-2xl"
+                key={category.id}
+                onClick={() => openCategory(category)}
+              >
+                <div className="flex items-center gap-2">
+                  <Image src={categoryImage } width={24} height={24} alt="category" />
+                  <p>{category.name}</p>
+                </div>
+                <p>{category.children.length}</p>
+              </div>
+            );
+          } else if ((item as Category).children?.length) {
+            const category = item as Category;
+            return (
+              <div
+                className="flex justify-between p-3 bg-white my-4 rounded-2xl"
+                key={category.id}
+                onClick={() => openCategory(category)}
+              >
+                <div className="flex items-center gap-2">
+                  <Image src={Folder} width={24} height={24} alt="category" />
+                  <p>{category.name}</p>
+                </div>
+                <p>{category.children.length}</p>
+              </div>
+            );
+          } else {
+            const dua = item as Dua;
+            return (
+              <div
+                className="flex justify-between p-3 bg-white my-4 rounded-2xl"
+                key={dua.id}
+                onClick={() => openDua(dua)}
+              >
+                <div className="flex items-center gap-2">
+                  <p>{dua.name}</p>
+                </div>
+              </div>
+            );
+          }
+        })
+      ) : (
+        <div className="flex my-[40%] items-center justify-center">
+          <Image src={NoData} alt="no data" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default List;
--- a/src/components/sidebar/tabs.tsx
+++ b/src/components/sidebar/tabs.tsx
@ -0,0 +1,39 @@
+"use client"
+
+import { useState } from "react";
+import List from "./list";
+
+const tabs = [
+  { name: "Categories" },
+  { name: "Famous" },
+  { name: "Near by" },
+  { name: "Today" },
+];
+
+const Tabs = () => {
+    const [selected , setSelected ]= useState({name : "Today"})
+
+  return (
+    <>
+    <div className=" rounded-2xl bg-[#EBEBEB]">
+      <ul className="p-1 flex gap-6 font-semibold text-xs whitespace-nowrap  text-[#8B8B8B]">
+        {tabs.map((tab) => (
+            <li
+            key={tab.name}
+            className=" hover:bg-white hover:shadow-lg w-20 h-9 rounded-xl flex items-center justify-center cursor-pointer"
+            onClick={()=>{setSelected(tab);
+            }}
+            >
+
+            <p>{tab.name}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+        <List tab={selected.name}/>
+
+        </>
+  );
+};
+
+export default Tabs;
--- a/src/components/utils/colorize-vowels.tsx
+++ b/src/components/utils/colorize-vowels.tsx
@ -0,0 +1,23 @@
+const colorizeVowels = (text: string) => {
+    // Normalize text to decomposed form (NFD)
+    const normalizedText = text.normalize("NFD");
+  
+    // Function to remove vowels/diacritics
+    const removeDiacritics = (str: string) =>
+      str.replace(/[\u064B-\u065F\u0670]/g, ""); // Remove diacritics from the text
+  
+    return (
+      <div className="relative">
+        {/* Bottom layer: Full text with vowels in orange */}
+        <div className="absolute top-0 left-0 text-2xl text-[#EB6E57] font-[UthmanTaha]">
+          {normalizedText}
+        </div>
+        {/* Top layer: Text without vowels in black */}
+        <div className="relative text-black font-[UthmanTaha] text-2xl">
+          {removeDiacritics(normalizedText)}
+        </div>
+      </div>
+    );
+  };
+
+  export default colorizeVowels
--- a/src/components/utils/date-formaters.ts
+++ b/src/components/utils/date-formaters.ts
@ -0,0 +1,42 @@
+import moment from "moment-hijri";
+
+
+const formatHijriDate = (date: Date) => {
+    // Map Hijri months from Arabic to English
+    const hijriMonths = [
+      "Muharram",
+      "Safar",
+      "Rabi' al-Awwal",
+      "Rabi' al-Thani",
+      "Jumada al-Awwal",
+      "Jumada al-Thani",
+      "Rajab",
+      "Sha'ban",
+      "Ramadan",
+      "Shawwal",
+      "Dhu al-Qi'dah",
+      "Dhu al-Hijjah",
+    ];
+
+    // Get the Hijri date components
+    const hijriDay = moment(date).iDate();
+    const hijriMonth = hijriMonths[moment(date).iMonth()];
+    const hijriYear = moment(date).iYear();
+
+    // Get the Gregorian day of the week
+    const daysOfWeek = [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday",
+    ];
+    const dayOfWeek = daysOfWeek[date.getDay()];
+
+    // Combine into the desired format
+    return `${dayOfWeek} ${hijriDay} ${hijriMonth} ${hijriYear}`;
+  };
+
+  export {formatHijriDate}
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -1,6 +1,22 @@
+import Header from "@/components/layout/header";
+import SideBar from "@/components/layout/sidebar";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";

 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  console.log(pageProps);
+  
+  return (
+    <>
+      <Header />
+      <div className="max-w-[1440px] m-auto">
+        <div className="p-11 flex gap-11">
+          <SideBar />
+          <main className="flex-grow">
+            <Component {...pageProps} />
+          </main>
+        </div>
+      </div>
+    </>
+  );
 }
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -4,7 +4,7 @@ export default function Document() {
  return (
    <Html lang="en">
      <Head />
-      <body className="antialiased">
+      <body className="antialiased text-black">
        <Main />
        <NextScript />
      </body>
--- a/src/pages/api/hello.ts
+++ b/src/pages/api/hello.ts
@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}
--- a/src/pages/duas/[slug].tsx
+++ b/src/pages/duas/[slug].tsx
@ -0,0 +1,89 @@
+import Image from "next/image";
+import Setting from "../../../public/assets/images/Setting.svg";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import http from "@/api/http";
+import colorizeVowels from "@/components/utils/colorize-vowels";
+
+// Define the Dua interface
+interface Dua {
+  id: number;
+  text: string;
+  description: string;
+  local_alpha: string;
+  translation: string;
+}
+
+type Data = {
+  results: Dua[];
+};
+
+const Dua: React.FC = () => {
+  const params = useParams();
+  const slug = params?.slug as string;
+
+  // Explicitly define the type of duaParts as Dua[]
+  const [duaParts, setDuaParts] = useState<Dua[]>([]); // <-- specify the type here
+
+  useEffect(() => {
+    const id: string | undefined = slug?.split("-").pop();
+    if (id) {
+      http.get(`web/mafatih-duas/${id}/parts/`).then((res: { data: Data }) => {
+        setDuaParts(res.data.results); // This is now valid because duaParts is typed as Dua[]
+      });
+    }
+  }, [slug]);
+
+  console.log(duaParts[1]);
+
+  if (!slug) {
+    return null; // Handling the case where slug is not available
+  }
+
+  return (
+    <div className="bg-[#F5F5F5] rounded-3xl h-[80vh] max-w-[887px] overflow-y-auto">
+      <div className="flex justify-between items-center bg-gradient-to-r from-[#F79B59] to-[#EB6E57] p-6 rounded-3xl text-white">
+        <p className="text-sm font-semibold">Dua of the month of Rajab from </p>
+        <div className="p-2 bg-white/20 rounded-2xl">
+          <Image sizes="24" src={Setting} alt="setting" />
+        </div>
+      </div>
+
+      <div className="p-6">
+        {duaParts.map((item: Dua) => (
+          <div
+            key={item.id}
+            className="p-1 rounded-3xl my-4"
+            style={{
+              background:
+                "linear-gradient(to right, rgba(254, 127, 120, 0.11), rgba(234, 109, 86, 0.3))",
+              borderRadius: "1.5rem",
+              padding: "1px",
+            }}
+          >
+            <div className="p-3 bg-white rounded-3xl">
+              {item?.text && (
+                <div className="mb-4 text-right">{colorizeVowels(item?.text)}</div>
+              )}
+              {item?.local_alpha && (
+                <p className="text-sm font-normal border-b mb-4 pb-4">
+                  {item?.local_alpha}
+                </p>
+              )}
+              {item?.translation && (
+                <p className="text-sm font-normal">{item?.translation}</p>
+              )}
+              {item?.description && (
+                <p className="text-[#36363C] italic text-xs font-normal">
+                  {item?.description}
+                </p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Dua;
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -1,114 +1,11 @@
 import Image from "next/image";
-import { Geist, Geist_Mono } from "next/font/google";
+import NoData from "../../public/assets/images/Untitled-1-02.svg";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});

 export default function Home() {
  return (
-    <div
-      className={`${geistSans.variable} ${geistMono.variable} 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-8 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 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/pages/index.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <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] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-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 text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-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-6 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=default-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=default-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=default-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 className="bg-[#F5F5F5] rounded-3xl h-[80vh] max-w-[887px] flex items-center justify-center">
+      <Image src={NoData} alt="no data"/>
    </div>
  );
 }
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@ -2,20 +2,28 @@
@tailwind components;
@tailwind utilities;

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+* {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+@layer base {
+  @font-face {
+    font-family: 'UthmanTaha'; /* Give a unique and clear name to your custom font */
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/public/fonts/KFGQPC Uthman Taha Naskh Regular.ttf') format('truetype'); /* Correct file format */
  }
+  @font-face {
+    font-family: 'Uthmantaha'; /* Give a unique and clear name to your custom font */
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('/public/fonts/KFGQPC Uthman Taha Naskh Regular.ttf') format('truetype'); /* Correct file format */
  }

+  /* Apply the custom font globally */
  body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+    font-family: 'UthmanTaha', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
 }