feat: add intro and slider pages with multiple slides for user registration process

- Created `Intro` component for the initial user interface with navigation buttons and introductory content. - Implemented `SliderPage` component to handle slide transitions and user interactions. - Developed multiple slide components (`SliderSlideOne`, `SliderSlideTwo`, `SliderSlideThree`, `SliderSlideFour`) to guide users through the registration process. - Added `Button` component with countdown functionality and various styles. - Introduced `InfoProgressCard` for displaying user progress in the registration process. - Created `NavigationButton` for navigation actions within the app. - Implemented `PageBackground` utility for dynamic background images based on user actions.
2 months ago · 49a696d1fb
31 changed files with 1183 additions and 84 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,7 +10,8 @@
      "dependencies": {
        "next": "16.2.3",
        "react": "19.2.4",
-        "react-dom": "19.2.4"
+        "react-dom": "19.2.4",
+        "react-icons": "^5.6.0"
      },
      "devDependencies": {
        "@biomejs/biome": "2.2.0",
@ -1683,6 +1684,15 @@
        "react": "^19.2.4"
      }
    },
+    "node_modules/react-icons": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
+      "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/scheduler": {
      "version": "0.27.0",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
--- a/package.json
+++ b/package.json
@ -12,7 +12,8 @@
  "dependencies": {
    "next": "16.2.3",
    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react-dom": "19.2.4",
+    "react-icons": "^5.6.0"
  },
  "devDependencies": {
    "@biomejs/biome": "2.2.0",
--- a/public/assets/images/Frame
+++ b/public/assets/images/Frame
@ -0,0 +1,18 @@
+<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" filter="url(#filter0_d_2035_16301)">
+<rect x="11.1406" y="6.86328" width="68" height="68" rx="34" transform="rotate(0.232334 11.1406 6.86328)" fill="#D7DBE2" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.4883 33.2406C40.825 33.2573 41.1516 33.3557 41.4354 33.5256L52.6521 40.5683C52.9122 40.7282 53.1262 40.9464 53.2735 41.2026C53.4207 41.4589 53.4969 41.7458 53.4957 42.0365C53.4944 42.3272 53.4161 42.6136 53.2668 42.8686C53.1173 43.1237 52.9017 43.3401 52.6402 43.4979L41.3668 50.4493C41.0561 50.627 40.6997 50.7237 40.3354 50.7293C40.0264 50.7279 39.7213 50.6587 39.4455 50.5285C39.1467 50.3764 38.8977 50.1511 38.7255 49.8771C38.5534 49.6031 38.4638 49.2902 38.4675 48.9727L38.5242 34.9787C38.5229 34.661 38.6152 34.3482 38.7896 34.0755C38.964 33.8029 39.2148 33.5796 39.5149 33.43C39.8162 33.2891 40.1517 33.2239 40.4883 33.2406Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_d_2035_16301" x="-0.132812" y="-0.136719" width="90.2734" height="90.2754" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<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 dy="4"/>
+<feGaussianBlur stdDeviation="5.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.616667 0 0 0 0 0.131042 0 0 0 0 0.131042 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2035_16301"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2035_16301" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/public/assets/images/Frame
+++ b/public/assets/images/Frame
--- a/public/assets/images/Frame
+++ b/public/assets/images/Frame
--- a/public/assets/images/Group
+++ b/public/assets/images/Group
--- a/public/assets/images/Group
+++ b/public/assets/images/Group
@ -0,0 +1,30 @@
+<svg width="75" height="75" viewBox="0 0 75 75" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="37.5" cy="37.5" r="37.5" fill="#EBEBEB"/>
+<path d="M37.5 21C44.9558 21 51 29.7304 51 40.5C51 51.2696 44.9558 60 37.5 60C30.0442 60 24 51.2696 24 40.5C24 29.7304 30.0442 21 37.5 21Z" fill="white"/>
+<path d="M40.2998 74.4775H39.7739C39.7192 74.417 39.6479 74.4121 39.5852 74.4121C39.5727 74.4121 39.5601 74.4121 39.5476 74.4126C39.5413 74.4126 39.5351 74.4126 39.5288 74.4131C39.5226 74.4131 39.5164 74.4131 39.5103 74.4131C39.5042 74.4131 39.498 74.4131 39.4919 74.4131C39.4858 74.4126 39.4797 74.4126 39.4734 74.4126C39.461 74.4121 39.4485 74.4121 39.436 74.4121C39.3736 74.4121 39.3025 74.417 39.2479 74.4775H38.5865C38.4753 74.4199 38.3621 74.3911 38.2497 74.3911C38.1423 74.3911 38.033 74.4175 37.925 74.4702H37.2635C37.1317 74.417 36.9988 74.3901 36.8683 74.3901C36.738 74.3901 36.6052 74.417 36.4739 74.4702H35.9467C35.8982 74.416 35.8372 74.4048 35.7603 74.4048C35.7475 74.4048 35.7347 74.4053 35.722 74.4058C35.7156 74.4058 35.7093 74.4058 35.7029 74.4062C35.6967 74.4062 35.6905 74.4062 35.6843 74.4062C35.678 74.4062 35.6717 74.4062 35.6654 74.4062C35.659 74.4058 35.6526 74.4058 35.6462 74.4058C35.6334 74.4053 35.6206 74.4048 35.6078 74.4048C35.5311 74.4048 35.47 74.416 35.4207 74.4702H34.6311C34.1976 74.3828 33.7518 74.3677 33.3208 74.3525L33.3119 74.3521L33.2986 74.3516C33.0306 74.3423 32.7536 74.333 32.4835 74.3057C29.2732 73.9849 25.9413 73.0684 22.2971 71.5039C19.2582 70.1992 16.3987 68.479 13.7975 66.3901C13.5347 66.1802 13.2675 65.9409 13.0938 65.6152V65.4795C13.4128 64.5752 13.7449 63.6509 14.038 62.835C14.4932 61.5674 14.9639 60.2568 15.413 58.957C16.9163 54.6016 18.1444 50.6436 19.1677 46.8579C19.7749 44.6094 20.337 42.3081 20.8806 40.082L20.8826 40.0737C21.0662 39.3223 21.2742 38.4697 21.4796 37.6401C21.8463 36.1528 22.1093 34.6484 22.3685 33.1089C22.77 30.7632 23.1862 28.8374 23.678 27.0483C24.2259 25.0649 25.2548 23.1919 26.7361 21.48C27.8722 20.1733 29.4453 18.5435 31.5439 17.5249C32.6957 16.9658 33.9606 16.4482 35.405 16.4482C35.4628 16.4482 35.5209 16.4492 35.5779 16.4507C35.6622 16.4526 35.7425 16.4541 35.8167 16.4541C36.315 16.4541 36.8038 16.4121 37.2696 16.3301H37.6687C38.0451 16.4351 38.4324 16.4492 38.7616 16.4492C38.8594 16.4492 38.9584 16.4478 39.0543 16.4463L39.1032 16.4453H39.1066C39.1466 16.4448 39.1864 16.4438 39.2261 16.4434H39.2281C39.2655 16.4429 39.3028 16.4429 39.3399 16.4429C40.5859 16.4429 41.7734 16.7041 42.9705 17.2422C43.9714 17.6924 44.994 18.3477 46.0969 19.2466C47.4865 20.375 48.7036 21.7686 49.8176 23.5063C50.5447 24.6411 51.0937 25.9248 51.4961 27.4326C51.9803 29.2725 52.3304 31.1729 52.669 33.0103C52.8124 33.7881 52.9606 34.5923 53.1176 35.3848C53.6954 38.2866 54.437 41.2012 55.1541 44.0195L55.2355 44.3394C55.3144 44.6499 55.3933 44.9604 55.4719 45.2715C56.3969 48.9307 57.5742 52.8477 59.177 57.5977C59.3279 58.043 59.4792 58.4961 59.6255 58.9346L59.632 58.9541L59.6331 58.9575C60.2858 60.9141 60.9607 62.9365 61.8239 64.853C62.1686 65.6201 62.1238 65.8135 61.4818 66.3335C58.8862 68.4155 56.0582 70.1377 53.0764 71.4526C50.131 72.751 46.9549 73.687 43.6362 74.2354C43.0471 74.3311 42.4382 74.353 41.8494 74.374L41.8424 74.3745C41.3356 74.3926 40.8115 74.4116 40.2998 74.4775ZM37.5192 25.4375C34.4383 25.438 31.6838 26.7915 29.3323 29.4609C27.081 32.0186 25.9434 34.8364 25.8546 38.0742C25.7849 40.6221 25.822 42.9087 25.9683 45.0654C26.1438 47.6514 27.0604 49.9351 28.6926 51.8516C29.5684 52.873 30.5563 53.8076 31.5115 54.7114L31.5158 54.7153C31.8421 55.0239 32.2119 55.3735 32.5682 55.7202C33.8771 57.0005 35.371 57.6709 37.1354 57.7695C37.3121 57.7788 37.4739 57.7832 37.6299 57.7832C39.1785 57.7832 40.4744 57.3765 41.4813 56.5737C43.6888 54.8198 45.4221 53.1094 46.7801 51.3462C47.6002 50.2876 48.1961 49.1343 48.5515 47.918C49.0211 46.3237 49.2266 44.5654 49.1985 42.3848C49.384 40.2437 49.2404 38.3672 49.0486 36.3096C48.9515 35.2505 48.681 34.2422 48.2662 33.3931C47.1063 31.0464 45.8545 29.3604 44.3266 28.0869C42.2653 26.3672 40.1317 25.5015 37.8041 25.4414C37.7155 25.4385 37.6224 25.4375 37.5192 25.4375Z" fill="#36363C"/>
+<path d="M36.4766 74.4709C36.7397 74.2718 37.0029 74.2789 37.2661 74.4709C37.0029 74.4709 36.7397 74.4709 36.4766 74.4709Z" fill="#4D4D4D"/>
+<path d="M36.4766 74.4709C36.7397 74.2718 37.0029 74.2789 37.2661 74.4709C37.0029 74.4709 36.7397 74.4709 36.4766 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M36.4766 74.4709C36.7397 74.2718 37.0029 74.2789 37.2661 74.4709C37.0029 74.4709 36.7397 74.4709 36.4766 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M36.4766 74.4709C36.7397 74.2718 37.0029 74.2789 37.2661 74.4709C37.0029 74.4709 36.7397 74.4709 36.4766 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M36.4766 74.4709C36.7397 74.2718 37.0029 74.2789 37.2661 74.4709C37.0029 74.4709 36.7397 74.4709 36.4766 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.4141 74.4685C35.4565 74.3262 35.5632 74.3477 35.6699 74.3618C35.7271 74.3831 35.7412 74.4046 35.7271 74.433C35.7126 74.4614 35.6914 74.4756 35.6772 74.4756C35.5918 74.4685 35.5063 74.4685 35.4141 74.4685Z" fill="#4D4D4D"/>
+<path d="M35.4141 74.4685C35.4565 74.3262 35.5632 74.3477 35.6699 74.3618C35.7271 74.3831 35.7412 74.4046 35.7271 74.433C35.7126 74.4614 35.6914 74.4756 35.6772 74.4756C35.5918 74.4685 35.5063 74.4685 35.4141 74.4685Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.4141 74.4685C35.4565 74.3262 35.5632 74.3477 35.6699 74.3618C35.7271 74.3831 35.7412 74.4046 35.7271 74.433C35.7126 74.4614 35.6914 74.4756 35.6772 74.4756C35.5918 74.4685 35.5063 74.4685 35.4141 74.4685Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.4141 74.4685C35.4565 74.3262 35.5632 74.3477 35.6699 74.3618C35.7271 74.3831 35.7412 74.4046 35.7271 74.433C35.7126 74.4614 35.6914 74.4756 35.6772 74.4756C35.5918 74.4685 35.5063 74.4685 35.4141 74.4685Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.4141 74.4685C35.4565 74.3262 35.5632 74.3477 35.6699 74.3618C35.7271 74.3831 35.7412 74.4046 35.7271 74.433C35.7126 74.4614 35.6914 74.4756 35.6772 74.4756C35.5918 74.4685 35.5063 74.4685 35.4141 74.4685Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.679 74.4697C35.679 74.434 35.6719 74.3985 35.6719 74.363C35.7856 74.3415 35.8853 74.3486 35.9421 74.4697C35.8567 74.4697 35.7715 74.4697 35.679 74.4697Z" fill="#4D4D4D"/>
+<path d="M35.679 74.4697C35.679 74.434 35.6719 74.3985 35.6719 74.363C35.7856 74.3415 35.8853 74.3486 35.9421 74.4697C35.8567 74.4697 35.7715 74.4697 35.679 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.679 74.4697C35.679 74.434 35.6719 74.3985 35.6719 74.363C35.7856 74.3415 35.8853 74.3486 35.9421 74.4697C35.8567 74.4697 35.7715 74.4697 35.679 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.679 74.4697C35.679 74.434 35.6719 74.3985 35.6719 74.363C35.7856 74.3415 35.8853 74.3486 35.9421 74.4697C35.8567 74.4697 35.7715 74.4697 35.679 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M35.679 74.4697C35.679 74.434 35.6719 74.3985 35.6719 74.363C35.7856 74.3415 35.8853 74.3486 35.9421 74.4697C35.8567 74.4697 35.7715 74.4697 35.679 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.25 74.4697C39.3069 74.3486 39.4065 74.3415 39.5203 74.363C39.563 74.3913 39.5771 74.4128 39.563 74.4411C39.5486 74.4625 39.5344 74.4768 39.5132 74.4768C39.4277 74.4697 39.3354 74.4697 39.25 74.4697Z" fill="#4D4D4D"/>
+<path d="M39.25 74.4697C39.3069 74.3486 39.4065 74.3415 39.5203 74.363C39.563 74.3913 39.5771 74.4128 39.563 74.4411C39.5486 74.4625 39.5344 74.4768 39.5132 74.4768C39.4277 74.4697 39.3354 74.4697 39.25 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.25 74.4697C39.3069 74.3486 39.4065 74.3415 39.5203 74.363C39.563 74.3913 39.5771 74.4128 39.563 74.4411C39.5486 74.4625 39.5344 74.4768 39.5132 74.4768C39.4277 74.4697 39.3354 74.4697 39.25 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.25 74.4697C39.3069 74.3486 39.4065 74.3415 39.5203 74.363C39.563 74.3913 39.5771 74.4128 39.563 74.4411C39.5486 74.4625 39.5344 74.4768 39.5132 74.4768C39.4277 74.4697 39.3354 74.4697 39.25 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.25 74.4697C39.3069 74.3486 39.4065 74.3415 39.5203 74.363C39.563 74.3913 39.5771 74.4128 39.563 74.4411C39.5486 74.4625 39.5344 74.4768 39.5132 74.4768C39.4277 74.4697 39.3354 74.4697 39.25 74.4697Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.5078 74.4709C39.5078 74.4355 39.5078 74.3998 39.5149 74.3642C39.6216 74.35 39.7283 74.3359 39.771 74.4709C39.6855 74.4709 39.6001 74.4709 39.5078 74.4709Z" fill="#4D4D4D"/>
+<path d="M39.5078 74.4709C39.5078 74.4355 39.5078 74.3998 39.5149 74.3642C39.6216 74.35 39.7283 74.3359 39.771 74.4709C39.6855 74.4709 39.6001 74.4709 39.5078 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.5078 74.4709C39.5078 74.4355 39.5078 74.3998 39.5149 74.3642C39.6216 74.35 39.7283 74.3359 39.771 74.4709C39.6855 74.4709 39.6001 74.4709 39.5078 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.5078 74.4709C39.5078 74.4355 39.5078 74.3998 39.5149 74.3642C39.6216 74.35 39.7283 74.3359 39.771 74.4709C39.6855 74.4709 39.6001 74.4709 39.5078 74.4709Z" fill="black" fill-opacity="0.2"/>
+<path d="M39.5078 74.4709C39.5078 74.4355 39.5078 74.3998 39.5149 74.3642C39.6216 74.35 39.7283 74.3359 39.771 74.4709C39.6855 74.4709 39.6001 74.4709 39.5078 74.4709Z" fill="black" fill-opacity="0.2"/>
+</svg>
--- a/public/assets/images/Group
+++ b/public/assets/images/Group
@ -0,0 +1,7 @@
+<svg width="85" height="85" viewBox="0 0 85 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="42.5" cy="42.5" r="37.5" fill="#FF6175"/>
+<circle cx="42.5" cy="42.5" r="41.5" stroke="#FF6175" stroke-width="2"/>
+<path d="M16.2735 69.3315C17.753 68.6628 19.2965 68.165 20.8186 67.6173C23.1018 66.7922 25.4846 66.4508 27.8816 66.1521C28.1661 66.1165 28.4506 66.1023 28.7209 66.0168C29.0908 65.9031 29.3895 65.7395 29.5673 65.2986C30.0794 63.9827 30.5489 62.6597 30.9828 61.3225C31.1961 60.6609 31.8718 60.4761 32.384 60.9811C32.6045 61.2017 32.8321 61.1519 33.0455 61.1162C33.3442 61.0735 33.1878 60.7961 33.2091 60.6255C33.2731 60.1702 33.3157 59.7079 33.3798 59.1033C35.855 61.7777 38.8922 63.1433 42.4272 63.1433C45.9765 63.1504 49.0421 61.8204 51.5316 59.082C51.6027 59.7079 51.6454 60.1987 51.7094 60.6895C51.7307 60.8459 51.6027 61.0878 51.873 61.1162C52.0793 61.1376 52.2927 61.1874 52.4989 61.0238C53.2244 60.4404 53.6797 60.5969 53.9642 61.4434C54.4194 62.7734 54.9244 64.0894 55.4009 65.4124C55.5717 65.8818 55.97 65.9742 56.3896 66.024C58.616 66.2943 60.8422 66.6145 62.9832 67.2474C64.9036 67.8164 66.8027 68.5063 68.6378 69.3245C68.6094 69.8293 68.1968 70.0713 67.8768 70.3486C65.8496 72.1196 63.7015 73.72 61.3615 75.05C57.3214 77.3333 53.0111 78.8555 48.4233 79.6094C47.3635 79.7872 46.2824 79.7231 45.2297 79.894C45.0945 79.894 44.9665 79.894 44.8313 79.894C44.7531 79.8086 44.6464 79.8298 44.5468 79.8228C44.4686 79.8228 44.3975 79.8228 44.3192 79.8228C44.2196 79.8298 44.1129 79.8015 44.0347 79.894C43.8142 79.894 43.5938 79.894 43.3732 79.894C43.1527 79.7872 42.9322 79.7872 42.7117 79.894C42.4912 79.894 42.2708 79.894 42.0502 79.894C41.7871 79.7872 41.5239 79.7872 41.2607 79.894C41.0829 79.894 40.9051 79.894 40.7344 79.894C40.6561 79.8086 40.5494 79.8298 40.4499 79.8228C40.3717 79.8228 40.3005 79.8228 40.2222 79.8228C40.1227 79.8298 40.016 79.8015 39.9378 79.894C39.7172 79.894 39.4968 79.894 39.2763 79.894C38.2165 79.709 37.1424 79.7445 36.0826 79.5596C29.0481 78.322 22.7888 75.4485 17.3902 70.7469C17.1057 70.4979 16.7927 70.2917 16.5438 70.0143C16.3802 69.8223 16.181 69.6373 16.2735 69.3315Z" fill="#36363C"/>
+<path d="M42.1159 61.6344C39.9963 61.5491 37.6633 61.0796 35.5721 59.7495C34.2563 58.9173 33.4454 57.6512 32.6488 56.3567C31.7028 54.8133 31.5961 53.1062 31.5108 51.3777C31.4894 51.0008 31.4538 50.816 30.9986 50.7803C29.6258 50.6665 29.2062 49.4858 28.7509 48.49C27.8192 46.4771 27.4991 44.2935 27.3142 42.1028C27.2573 41.4555 27.3355 40.7655 27.6272 40.1182C27.7836 39.7769 28.0255 39.5208 28.3029 39.4923C28.7225 39.4497 28.7509 39.2647 28.7225 38.9517C28.7083 38.8024 28.7225 38.6459 28.7225 38.4894C28.7368 37.5221 29 37.1593 29.8676 36.8322C31.5534 36.1921 33.3387 36.0569 35.0956 35.751C36.5181 35.5021 37.9549 35.4096 39.3917 35.2815C39.9038 35.2389 40.4017 35.3456 40.8996 35.3456C42.244 35.3527 43.5811 35.3243 44.9254 35.2958C46.2982 35.2744 47.6781 35.3882 49.0366 35.6231C50.4307 35.8577 51.8391 36.0497 53.2332 36.2917C53.916 36.4125 54.549 36.7112 55.2034 36.9175C56.121 37.2021 56.1921 37.8991 56.1921 38.6744C56.1921 39.0513 56.057 39.4355 56.7185 39.5422C57.3017 39.6416 57.4226 40.3174 57.5151 40.8509C57.6857 41.8965 57.6004 42.9421 57.387 43.9805C57.0741 45.4812 56.8465 47.0035 56.2135 48.4261C55.872 49.1941 55.3812 49.8556 54.8478 50.4816C54.5988 50.7732 54.2005 50.7591 53.8591 50.7732C53.4751 50.7945 53.4252 50.951 53.4039 51.2925C53.3114 52.594 53.3186 53.9029 52.8136 55.1618C51.583 58.2203 49.4705 60.2759 46.2484 61.0938C45.0037 61.4281 43.7305 61.6487 42.1159 61.6344Z" fill="white"/>
+<path d="M56.4562 29.1861C56.4847 31.2558 56.4207 33.3186 56.5842 35.3884C56.6554 36.2989 56.6127 36.2917 55.7734 36.0215C54.5785 35.6302 53.3622 35.3172 52.1174 35.1252C51.8187 35.2248 51.5911 34.9972 51.3208 34.9687C50.3748 34.6771 49.3861 34.6629 48.4188 34.5918C44.4569 34.3144 40.488 34.3144 36.5262 34.5918C35.5588 34.6629 34.5702 34.6771 33.6241 34.9687C33.3539 34.9901 33.1263 35.2248 32.8275 35.1252C31.533 35.3102 30.2811 35.6516 29.0436 36.057C28.5386 36.2206 28.2682 36.2562 28.3394 35.5876C28.5457 33.5675 28.3607 31.5333 28.5314 29.5204C28.6737 27.7777 29.2996 26.156 30.267 24.6766C31.91 22.1587 34.2928 20.6792 37.017 19.5838C39.0085 18.7801 41.0641 18.524 43.1625 18.6094C46.9749 18.7659 50.3108 20.1671 53.1132 22.7632C54.7491 24.2783 55.7378 26.1844 56.2214 28.3609C56.2357 28.4178 56.2784 28.4676 56.314 28.5246C56.5985 28.6739 56.2997 28.9798 56.4562 29.1861Z" fill="#36363C"/>
+</svg>
--- a/public/assets/images/Inner
+++ b/public/assets/images/Inner
@ -0,0 +1,10 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="44" height="44" rx="10" fill="url(#paint0_linear_2106_424)"/>
+<path d="M16.7422 17C16.7422 15.6739 17.269 14.4021 18.2067 13.4645C19.1443 12.5268 20.4161 12 21.7422 12C23.0683 12 24.34 12.5268 25.2777 13.4645C26.2154 14.4021 26.7422 15.6739 26.7422 17C26.7422 18.3261 26.2154 19.5979 25.2777 20.5355C24.34 21.4732 23.0683 22 21.7422 22C20.4161 22 19.1443 21.4732 18.2067 20.5355C17.269 19.5979 16.7422 18.3261 16.7422 17ZM15.5642 24.672C17.1672 23.694 19.3472 23 21.7422 23C22.1895 23 22.6282 23.0233 23.0582 23.07C23.23 23.0884 23.394 23.151 23.5344 23.2517C23.6748 23.3524 23.7867 23.4878 23.8592 23.6446C23.9317 23.8014 23.9623 23.9743 23.9481 24.1465C23.934 24.3186 23.8754 24.4842 23.7782 24.627C23.1009 25.6213 22.7398 26.797 22.7422 28C22.7422 28.92 22.9492 29.79 23.3172 30.567C23.3889 30.7184 23.4214 30.8853 23.4118 31.0525C23.4022 31.2198 23.3507 31.3819 23.2621 31.524C23.1735 31.6662 23.0506 31.7838 22.9048 31.8661C22.7589 31.9484 22.5947 31.9927 22.4272 31.995L21.7422 32C19.5132 32 17.4072 31.86 15.8292 31.442C15.0442 31.234 14.3052 30.936 13.7452 30.486C13.1522 30.01 12.7422 29.345 12.7422 28.5C12.7422 27.713 13.1002 26.977 13.5862 26.361C14.0802 25.736 14.7632 25.161 15.5642 24.671V24.672ZM26.7422 28C26.7422 27.7348 26.8475 27.4804 27.0351 27.2929C27.2226 27.1054 27.477 27 27.7422 27H28.7322C29.2902 27 29.7422 27.452 29.7422 28.01V30.134C29.9328 30.2441 30.0818 30.414 30.166 30.6173C30.2503 30.8207 30.265 31.0462 30.2081 31.2588C30.1511 31.4714 30.0256 31.6593 29.8509 31.7933C29.6763 31.9273 29.4623 32 29.2422 32H28.7522C28.4843 32 28.2274 31.8936 28.038 31.7042C27.8486 31.5148 27.7422 31.2579 27.7422 30.99V29C27.477 29 27.2226 28.8946 27.0351 28.7071C26.8475 28.5196 26.7422 28.2652 26.7422 28ZM28.7422 24C28.4873 24.0003 28.2422 24.0979 28.0568 24.2728C27.8715 24.4478 27.76 24.687 27.745 24.9414C27.7301 25.1958 27.8129 25.4464 27.9765 25.6418C28.14 25.8373 28.3721 25.9629 28.6252 25.993L28.7442 26C28.9991 25.9997 29.2442 25.9021 29.4296 25.7272C29.6149 25.5522 29.7264 25.313 29.7414 25.0586C29.7563 24.8042 29.6735 24.5536 29.5099 24.3582C29.3463 24.1627 29.1143 24.0371 28.8612 24.007L28.7422 24Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2106_424" x1="44.3213" y1="44.1106" x2="10.4507" y2="2.36307" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FE6F82"/>
+<stop offset="1" stop-color="#E03950"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/assets/images/home-Checkups-List.svg
+++ b/public/assets/images/home-Checkups-List.svg
--- a/public/assets/images/icon-park-solid_success.svg
+++ b/public/assets/images/icon-park-solid_success.svg
@ -0,0 +1,15 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2035_16285" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="2" width="32" height="34">
+<path d="M18.7941 3.13281L22.9078 6.13372L28.0004 6.12432L29.5643 10.9703L33.6898 13.9555L32.1071 18.7952L33.6898 23.6348L29.5643 26.6201L28.0004 31.466L22.9078 31.4566L18.7941 34.4575L14.6804 31.4566L9.58779 31.466L8.0239 26.6201L3.89844 23.6348L5.48112 18.7952L3.89844 13.9555L8.0239 10.9703L9.58779 6.12432L14.6804 6.13372L18.7941 3.13281Z" fill="white" stroke="white" stroke-width="1.71553" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3125 18.7945L17.2281 22.7101L25.0593 14.8789" stroke="black" stroke-width="1.71553" stroke-linecap="round" stroke-linejoin="round"/>
+</mask>
+<g mask="url(#mask0_2035_16285)">
+<path d="M0 0L37.5896 0V37.5896H0L0 0Z" fill="url(#paint0_linear_2035_16285)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2035_16285" x1="37.8642" y1="37.6841" x2="8.92816" y2="2.01879" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8DF0"/>
+<stop offset="1" stop-color="#F14B46"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/assets/images/support.svg
+++ b/public/assets/images/support.svg
@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0473 12.4463C22.0536 10.9147 21.0054 9.62813 19.5981 9.29067C19.3513 5.27489 16.0816 2.06455 12.0894 2.04836C8.09724 2.03217 4.80167 5.20521 4.52225 9.22954C3.11229 9.55458 2.05372 10.8336 2.04751 12.3652L2.03945 14.3517C2.03223 16.1316 3.44442 17.5962 5.19784 17.6033L6.61595 17.609C7.60852 17.6131 8.41256 16.7986 8.41667 15.785L8.4361 10.9943C8.44021 9.98069 7.6428 9.15975 6.65023 9.15572L6.04233 9.15326C6.35895 6.03022 8.95241 3.5983 12.0831 3.61099C15.2138 3.62369 17.7874 6.07557 18.0787 9.20207L17.4708 9.1996C16.4782 9.19558 15.6742 10.01 15.6701 11.0236L15.6507 15.8143C15.6465 16.8279 16.444 17.6489 17.4365 17.6529L17.9228 17.6549C17.6267 18.3055 16.9866 18.7578 16.2466 18.7548L14.7573 18.7488C14.5989 17.7549 13.7614 16.9862 12.7479 16.9821L11.3193 16.9763C10.1843 16.9717 9.25913 17.9098 9.25443 19.0679L9.25091 19.937C9.24621 21.0961 10.1647 22.0407 11.2988 22.0453L12.7273 22.0511C13.7408 22.0552 14.5845 21.2933 14.751 20.3007L16.2403 20.3068C17.8617 20.3134 19.2238 19.1394 19.5446 17.578C20.964 17.2627 22.033 15.9741 22.0393 14.4328L22.0473 12.4463ZM6.91635 10.9881L6.89693 15.7788C6.8963 15.934 6.77422 16.0577 6.62224 16.0571L5.20414 16.0513C4.29229 16.0476 3.55542 15.289 3.5592 14.3578L3.56725 12.3713C3.57103 11.4402 4.31403 10.6876 5.22587 10.6913L6.64398 10.697C6.79595 10.6976 6.91703 10.8223 6.9164 10.9775L6.91635 10.9881ZM13.2631 19.9436C13.2619 20.2433 13.0177 20.4906 12.7242 20.4894L11.2956 20.4836C11.0021 20.4825 10.76 20.2332 10.7612 19.9334L10.7647 19.0643C10.7659 18.7646 11.0101 18.5173 11.3036 18.5185L12.7322 18.5243C13.0257 18.5255 13.2678 18.7748 13.2666 19.0745L13.2631 19.9436ZM20.5195 14.4266C20.5158 15.3578 19.7728 16.1104 18.8609 16.1067L17.4428 16.101C17.2908 16.1003 17.1698 15.9757 17.1704 15.8205L17.1898 11.0298C17.1905 10.8746 17.3125 10.7509 17.4645 10.7516L18.8826 10.7573C19.7945 10.761 20.5313 11.5196 20.5276 12.4508L20.5195 14.4373L20.5195 14.4266Z" fill="black"/>
+</svg>
--- a/public/assets/images/tabler_user-filled.svg
+++ b/public/assets/images/tabler_user-filled.svg
@ -0,0 +1,9 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7918 3.13281C20.3406 3.13281 21.8547 3.5921 23.1425 4.4526C24.4304 5.3131 25.4341 6.53617 26.0268 7.96713C26.6196 9.39809 26.7746 10.9727 26.4725 12.4918C26.1703 14.0109 25.4245 15.4063 24.3292 16.5015C23.234 17.5967 21.8387 18.3425 20.3196 18.6447C18.8005 18.9469 17.2259 18.7918 15.7949 18.1991C14.364 17.6063 13.1409 16.6026 12.2804 15.3148C11.4199 14.0269 10.9606 12.5128 10.9606 10.964L10.9684 10.6241C11.056 8.60798 11.9185 6.70348 13.3761 5.30778C14.8336 3.91208 16.7737 3.13293 18.7918 3.13281ZM21.9242 21.9276C24.0012 21.9276 25.9931 22.7527 27.4617 24.2213C28.9303 25.69 29.7554 27.6819 29.7554 29.7588V31.325C29.7554 32.1558 29.4254 32.9526 28.8379 33.54C28.2505 34.1275 27.4537 34.4575 26.6229 34.4575H10.9606C10.1298 34.4575 9.33306 34.1275 8.7456 33.54C8.15815 32.9526 7.82813 32.1558 7.82812 31.325V29.7588C7.82812 27.6819 8.65319 25.69 10.1218 24.2213C11.5905 22.7527 13.5823 21.9276 15.6593 21.9276H21.9242Z" fill="url(#paint0_linear_2035_16280)"/>
+<defs>
+<linearGradient id="paint0_linear_2035_16280" x1="29.9156" y1="34.5362" x2="5.53913" y2="13.5045" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8DF0"/>
+<stop offset="1" stop-color="#F14B46"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/assets/images/typcn_heart-full-outline.svg
+++ b/public/assets/images/typcn_heart-full-outline.svg
@ -0,0 +1,9 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.44531 14.7233C3.44531 16.7594 3.75856 19.8919 6.57778 22.7111C9.08376 25.2171 17.3848 30.8555 17.6981 31.1688C18.0113 31.3254 18.3245 31.482 18.6378 31.482C18.951 31.482 19.2643 31.3254 19.5775 31.1688C19.8908 30.8555 28.1918 25.3737 30.6978 22.7111C33.517 19.8919 33.8303 16.7594 33.8303 14.7233C33.8303 10.0246 30.0713 6.26562 25.3726 6.26562C22.8666 6.26562 20.3607 7.67524 18.7944 9.86797C17.2282 7.67524 14.7222 6.26562 11.903 6.26562C7.3609 6.26562 3.44531 10.0246 3.44531 14.7233Z" fill="url(#paint0_linear_2035_16295)"/>
+<defs>
+<linearGradient id="paint0_linear_2035_16295" x1="34.0522" y1="31.5454" x2="15.6718" y2="4.24691" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8DF0"/>
+<stop offset="1" stop-color="#F14B46"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/fonts/Faminela/Faminela.otf
+++ b/public/fonts/Faminela/Faminela.otf
--- a/public/fonts/Faminela/Faminela.ttf
+++ b/public/fonts/Faminela/Faminela.ttf
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,8 +1,7 @@
@import "tailwindcss";

 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --default-page-background-image: url("/assets/images/home-Checkups-List.svg");
 }

@theme inline {
@ -10,17 +9,38 @@
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --font-faminela: var(--font-faminela-local);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+  min-height: 100%;
 }

 body {
-  background: var(--background);
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  justify-content: center;
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.app-shell {
+  width: min(100%, 375px);
+  min-height: 100vh;
+  padding-inline: 17px;
+  box-sizing: border-box;
+  background-color: var(--background);
+  background-image: var(--default-page-background-image);
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+body[data-page-background="none"] .app-shell {
+  background-image: none;
+}
+
+body[data-page-background="custom"] .app-shell {
+  background-image: var(--page-background-image);
 }
--- a/src/app/intro/page.tsx
+++ b/src/app/intro/page.tsx
@ -0,0 +1,96 @@
+import Button from "@/components/ui/button";
+import NavigationButton from "@/components/ui/navigation-button";
+import Image from "next/image";
+
+export default function Intro() {
+  return (
+    <div className="pt-7">
+      <header className="flex items-center justify-between">
+        <NavigationButton icon="back" />
+        <h1 className="font-faminela">Habib Marriage</h1>
+        <NavigationButton icon="support" />
+      </header>
+      <main>
+        <div className="flex flex-col items-center mt-16">
+          <Image
+            src={"/assets/images/Group 1597880452.svg"}
+            alt="heavenly marriage"
+            width={168}
+            height={155}
+          />
+          <h2 className="text-[#475569] font-bold mt-5 text-center">
+            A Path to Heavenly Marriage
+          </h2>
+          <p className=" text-center mt-2 text-xs">
+            We have come together with the goal of creating a secure and
+            confidential path for "permanent marriage" among Muslims
+          </p>
+        </div>
+        <div className="flex items-center justify-between mt-4">
+          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
+            <Image
+              src={"/assets/images/tabler_user-filled.svg"}
+              alt="User"
+              width={37}
+              height={37}
+            />
+            <div className="flex flex-col items-start justify-start -mb-2">
+              <p className="text-[#36363C] text-lg font-bold leading-3">120</p>
+              <p className="text-[#36363C] text-[10px] font-semibold">
+                user profile
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
+            <Image
+              src={"/assets/images/icon-park-solid_success.svg"}
+              alt="User"
+              width={37}
+              height={37}
+            />
+            <div className="flex flex-col items-start justify-start -mb-2">
+              <p className="text-[#36363C] text-lg font-bold leading-3">14</p>
+              <p className="text-[#36363C] text-[10px] font-semibold">
+                matches
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-0.5 p-2 border border-[#FD6ABB]/10 rounded-2xl">
+            <Image
+              src={"/assets/images/typcn_heart-full-outline.svg"}
+              alt="User"
+              width={37}
+              height={37}
+            />
+            <div className="flex flex-col items-start justify-start -mb-2">
+              <p className="text-[#36363C] text-lg font-bold leading-3">14</p>
+              <p className="text-[#36363C] text-[10px] font-semibold">
+                marriage
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="mt-6 relative">
+          <Image
+            src={"/assets/images/Frame 2095586523.png"}
+            alt="video"
+            width={344}
+            height={221}
+          />
+          <Image
+            src={"/assets/images/Frame 1116607280.svg"}
+            alt="play"
+            width={68}
+            height={68}
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        </div>
+        <div className="mt-7 pb-5">
+          <Button >
+            Submit
+          </Button>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,15 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const faminela = localFont({
+  src: "../../public/fonts/Faminela/Faminela.otf",
+  variable: "--font-faminela-local",
+  display: "swap",
 });

 export const metadata: Metadata = {
@ -23,11 +19,10 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en">
+      <body className={faminela.variable}>
+        <div className="app-shell">{children}</div>
+      </body>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,65 +1,16 @@
-import Image from "next/image";
+import InfoProgressCard from "@/components/ui/info-progress-card";

 export default function Home() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
+    <main className="flex min-h-screen items-start justify-center px-3 py-6">
+      <div className="w-full max-w-[345px]">
+        <InfoProgressCard
+          title="persenoal info"
+          requiredLabel="(Required)"
+          estimate="30 min"
+          progress={46}
        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            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={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] 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"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+      </div>
+    </main>
  );
 }
--- a/src/app/slider/page.tsx
+++ b/src/app/slider/page.tsx
@ -0,0 +1,5 @@
+import SliderPage from "@/components/sliders/slider-page";
+
+export default function SliderRoute() {
+  return <SliderPage />;
+}
--- a/src/components/sliders/slider-page.tsx
+++ b/src/components/sliders/slider-page.tsx
@ -0,0 +1,129 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { TouchEvent } from "react";
+import { useState } from "react";
+import { SliderSlideFour } from "@/components/sliders/slider-slide-four";
+import {
+  SliderSlideOne,
+  SliderSlideOneActions,
+} from "@/components/sliders/slider-slide-one";
+import { SliderSlideThree } from "@/components/sliders/slider-slide-three";
+import { SliderSlideTwo } from "@/components/sliders/slider-slide-two";
+import NavigationButton from "@/components/ui/navigation-button";
+
+const SLIDE_COUNT = 4;
+const SWIPE_THRESHOLD = 40;
+const SLIDES = [
+  { id: "slide-1", component: SliderSlideOne },
+  { id: "slide-2", component: SliderSlideTwo },
+  { id: "slide-3", component: SliderSlideThree },
+  { id: "slide-4", component: SliderSlideFour },
+] as const;
+
+export default function SliderPage() {
+  const router = useRouter();
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [touchStartX, setTouchStartX] = useState<number | null>(null);
+  const shouldShowBottomActions =
+    activeSlide === 0 ||
+    activeSlide === 1 ||
+    activeSlide === 2 ||
+    activeSlide === 3;
+
+  const goToSlide = (index: number) => {
+    setActiveSlide(Math.max(0, Math.min(index, SLIDE_COUNT - 1)));
+  };
+
+  const goToPreviousSlide = () => {
+    goToSlide(activeSlide - 1);
+  };
+
+  const goToNextSlide = () => {
+    goToSlide(activeSlide + 1);
+  };
+
+  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
+    setTouchStartX(event.touches[0]?.clientX ?? null);
+  };
+
+  const handleTouchEnd = (event: TouchEvent<HTMLDivElement>) => {
+    if (touchStartX === null) {
+      return;
+    }
+
+    const touchEndX = event.changedTouches[0]?.clientX ?? touchStartX;
+    const deltaX = touchStartX - touchEndX;
+
+    if (Math.abs(deltaX) >= SWIPE_THRESHOLD) {
+      if (deltaX > 0) {
+        goToNextSlide();
+      } else {
+        goToPreviousSlide();
+      }
+    }
+
+    setTouchStartX(null);
+  };
+
+  return (
+    <div className="relative flex h-[100dvh] max-h-[100dvh] flex-col overflow-hidden">
+      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-7 pb-5">
+        <div className="relative flex items-center justify-between">
+          <NavigationButton
+            icon="close"
+            iconLabel="Close slider"
+            onClick={() => router.back()}
+          />
+          <nav
+            aria-label={`Slide ${activeSlide + 1} of ${SLIDE_COUNT}`}
+            className="absolute left-1/2 flex -translate-x-1/2 items-center gap-2"
+          >
+            {SLIDES.map(({ id }, index) => {
+              const isActive = index === activeSlide;
+
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  aria-label={`Go to slide ${index + 1}`}
+                  aria-pressed={isActive}
+                  className={[
+                    "h-2.5 rounded-full border-1 border-[#F14B46] transition-all duration-300 ease-out",
+                    isActive ? "w-6 bg-[#F14B46]" : "w-2.5 bg-white/80",
+                  ].join(" ")}
+                  onClick={() => goToSlide(index)}
+                />
+              );
+            })}
+          </nav>
+        </div>
+      </header>
+
+      <main
+        className="flex min-h-0 flex-1 touch-pan-y overflow-hidden pt-6"
+        onTouchEnd={handleTouchEnd}
+        onTouchStart={handleTouchStart}
+      >
+        <div
+          className="flex h-full w-full transition-transform duration-300 ease-out"
+          style={{ transform: `translateX(-${activeSlide * 100}%)` }}
+        >
+          {SLIDES.map(({ id, component: SlideComponent }, index) => (
+            <SlideComponent key={id} index={index} />
+          ))}
+        </div>
+      </main>
+
+      {shouldShowBottomActions ? (
+        <div className="pointer-events-none fixed inset-x-0 bottom-0 z-20 bg-[#F5F5F5]">
+          <div className="mx-auto w-full max-w-[375px] px-[17px] pt-2.5 pb-6">
+            <div className="pointer-events-auto">
+              <SliderSlideOneActions />
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/src/components/sliders/slider-slide-four.tsx
+++ b/src/components/sliders/slider-slide-four.tsx
@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import type { SliderSlideProps } from "@/components/sliders/slider-slide";
+
+export function SliderSlideFour({ index }: SliderSlideProps) {
+  const [selectedOption, setSelectedOption] = useState<"self" | "other">(
+    "other",
+  );
+  const options = [
+    { id: "self", label: "Registering for myself" },
+    { id: "other", label: "Registering for someone else" },
+  ] as const;
+
+  return (
+    <section
+      aria-label={`Slide ${index + 1}`}
+      className="flex h-full min-h-0 w-full shrink-0 flex-col"
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto pb-28">
+        <div className="text-center">
+          <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
+          <p className="text-[#111111] font-bold">
+            {index + 1}/4 terms & conditions
+          </p>
+        </div>
+        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
+          <p className="text-[#F14B46] text-xs font-semibold text-center">
+            Read the terms and conditions carefully so that you don't run into
+            any problems in the next process - reading this section is
+            mandatory.
+          </p>
+        </div>
+        <div className="flex min-h-[calc(100dvh-520px)] items-center justify-center pt-6">
+          <div className="w-full max-w-[440px] space-y-4">
+            {options.map((option) => {
+              const isSelected = option.id === selectedOption;
+
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  aria-pressed={isSelected}
+                  className={[
+                    "flex w-full items-center gap-3 rounded-[18px] px-4 py-5 text-left transition-colors",
+                    isSelected
+                      ? "bg-[#F4435C] text-white"
+                      : "bg-[#ECE9E9] text-[#2A2A2A]",
+                  ].join(" ")}
+                  onClick={() => setSelectedOption(option.id)}
+                >
+                  <span
+                    className={[
+                      "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-colors",
+                      isSelected
+                        ? "border-white bg-white text-[#F4435C]"
+                        : "border-[#9B9B9B] bg-transparent text-transparent",
+                    ].join(" ")}
+                    aria-hidden="true"
+                  >
+                    <svg
+                      viewBox="0 0 16 16"
+                      className="h-3.5 w-3.5"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                      aria-hidden="true"
+                    >
+                      <path
+                        d="M3.5 8.5 6.5 11.5 12.5 5.5"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </span>
+                  <span className="text-[15px] font-semibold sm:text-[16px]">
+                    {option.label}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/sliders/slider-slide-one.tsx
+++ b/src/components/sliders/slider-slide-one.tsx
@ -0,0 +1,119 @@
+import type { SliderSlideProps } from "@/components/sliders/slider-slide";
+import Button from "../ui/button";
+
+const ACTION_AREA_HEIGHT = 112;
+const CONTENT_MASK = `linear-gradient(to bottom, black 0, black calc(100% - ${ACTION_AREA_HEIGHT}px), transparent calc(100% - ${ACTION_AREA_HEIGHT}px), transparent 100%)`;
+
+export function SliderSlideOne({ index }: SliderSlideProps) {
+  return (
+    <section
+      aria-label={`Slide ${index + 1}`}
+      className="flex h-full min-h-0 w-full shrink-0 flex-col"
+    >
+      <div
+        className="min-h-0 flex-1 overflow-y-auto pb-28"
+        style={{
+          WebkitMaskImage: CONTENT_MASK,
+          maskImage: CONTENT_MASK,
+        }}
+      >
+        <div className="text-center">
+          <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
+          <p className="text-[#111111] font-bold">
+            {index + 1}/4 terms & conditions
+          </p>
+        </div>
+        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
+          <p className="text-[#F14B46] text-xs font-semibold text-center">
+            Dear user, while welcoming you to the Habib Marij application,
+            please read the following rules and regulations carefully before
+            using the services of this platform. Your registration and use of
+            this application constitutes full acceptance of these rules.
+          </p>
+        </div>
+        <div className="bg-white rounded-xl mt-3">
+          <div className="space-y-6 px-5 py-4">
+            <div className="space-y-4">
+              <p className="text-[#F14B46] text-[14px] font-bold">
+                1. Eligibility and Membership Requirements
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Legal Age:</span>{" "}
+                <span className="font-normal">
+                  Users must meet the minimum legal age for independent
+                  registration.
+                </span>
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Identity Verification:</span>{" "}
+                <span className="font-normal">
+                  Mandatory submission of valid government-issued ID upon
+                  registration.
+                </span>
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Single Status Commitment:</span>{" "}
+                <span className="font-normal">
+                  Users must provide proof of being single, or documents
+                  confirming divorce or spouse&apos;s death upon request.
+                </span>
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Intent:</span>{" "}
+                <span className="font-normal">
+                  Commitment to monogamy and intention for permanent marriage
+                  only (no simultaneous or temporary relationships).
+                </span>
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">General Health:</span>{" "}
+                <span className="font-normal">
+                  Self-declaration regarding mental health, absence of
+                  addiction, and no criminal record.
+                </span>
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <p className="text-[#F14B46] text-[14px] font-bold">
+                2. Privacy and Data Management
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Content Security:</span>{" "}
+                <span className="font-normal">
+                  Technical prevention of screenshots from profiles and chat
+                  environments.
+                </span>
+              </p>
+
+              <p className="text-[#4D4D4D] text-[12px] leading-7">
+                <span className="font-bold">Progressive Disclosure:</span>{" "}
+                <span className="font-normal">
+                  Sensitive information (face, contact details) revealed
+                  step-by-step only with mutual consent.
+                </span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export function SliderSlideOneActions() {
+  return (
+    <div className="flex gap-3">
+      <Button variant="outlined">Decline</Button>
+      <Button variant="countdown" countdownSeconds={10}>
+        Accept
+      </Button>
+    </div>
+  );
+}
--- a/src/components/sliders/slider-slide-three.tsx
+++ b/src/components/sliders/slider-slide-three.tsx
@ -0,0 +1,30 @@
+import { SliderSlide, type SliderSlideProps } from "@/components/sliders/slider-slide";
+import Image from "next/image";
+
+export function SliderSlideThree({ index }: SliderSlideProps) {
+    return (
+      <section
+        aria-label={`Slide ${index + 1}`}
+        className="flex justify-between h-full min-h-0 w-full shrink-0 flex-col"
+      >
+        <div className="text-center">
+          <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
+          <p className="text-[#111111] font-bold">
+            {index + 1}/4 terms & conditions
+          </p>
+        </div>
+
+        <div className="flex justify-evenly items-center">
+          <div className="flex flex-col items-center">
+            <Image src={"/assets/images/Group 27033.svg"} alt="man" width={83} height={83}/>
+            <p className="text-sm font-semibold text-center">Submit Man</p>
+          </div>
+          <div className="flex flex-col items-center">
+            <Image src={"/assets/images/Group 27032.svg"} alt="man" width={83} height={83}/>
+            <p className="text-sm font-semibold text-center">Submit Woman</p>
+          </div>
+        </div>
+        <div className="h-28"/>
+      </section>
+    );
+}
--- a/src/components/sliders/slider-slide-two.tsx
+++ b/src/components/sliders/slider-slide-two.tsx
@ -0,0 +1,36 @@
+import Image from "next/image";
+import type { SliderSlideProps } from "@/components/sliders/slider-slide";
+
+export function SliderSlideTwo({ index }: SliderSlideProps) {
+  return (
+    <section
+      aria-label={`Slide ${index + 1}`}
+      className="flex h-full min-h-0 w-full shrink-0 flex-col"
+    >
+      <div className="text-center">
+        <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
+        <p className="text-[#111111] font-bold">
+          {index + 1}/4 terms & conditions
+        </p>
+      </div>
+      <div className="mt-8 flex min-h-0 flex-1 items-end justify-center pb-28">
+        <div className="relative w-full max-w-[344px]">
+          <Image
+            src={"/assets/images/Frame 20953586523.png"}
+            alt="video"
+            width={344}
+            height={488}
+            className="h-auto w-full"
+          />
+          <Image
+            src={"/assets/images/Frame 1116607280.svg"}
+            alt="play"
+            width={68}
+            height={68}
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/sliders/slider-slide.tsx
+++ b/src/components/sliders/slider-slide.tsx
@ -0,0 +1,15 @@
+export type SliderSlideProps = {
+  index: number;
+};
+
+export function SliderSlide({ index }: SliderSlideProps) {
+  return (
+    <section
+      aria-label={`Slide ${index + 1}`}
+      className="h-full min-h-0 w-full shrink-0"
+    >
+      <span className="sr-only">{`Empty slide ${index + 1}`}</span>
+      hi
+    </section>
+  );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -0,0 +1,183 @@
+"use client";
+
+import { type ButtonHTMLAttributes, useEffect, useId, useState } from "react";
+import { GoArrowRight } from "react-icons/go";
+
+type ButtonVariant = "default" | "secondary" | "countdown" | "outlined";
+type ArrowDirection = "left" | "right";
+
+export type ButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  children: string;
+  description?: string;
+  variant?: ButtonVariant;
+  arrowDirection?: ArrowDirection;
+  countdownSeconds?: number;
+};
+
+const FILLED_STROKE = "#FFFFFF";
+const EMPTY_STROKE = "rgba(255, 255, 255, 0.5)";
+const RADIUS = 18;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+export function Button({
+  children,
+  description,
+  variant = "default",
+  arrowDirection,
+  countdownSeconds = 0,
+  disabled,
+  className,
+  type = "button",
+  ...props
+}: ButtonProps) {
+  const countdownId = useId();
+  const isCountdown = variant === "countdown";
+  const isOutlined = variant === "outlined";
+  const initialCountdown = Math.max(0, Math.ceil(countdownSeconds));
+  const [remainingSeconds, setRemainingSeconds] = useState(initialCountdown);
+
+  useEffect(() => {
+    setRemainingSeconds(initialCountdown);
+  }, [initialCountdown]);
+
+  useEffect(() => {
+    if (!isCountdown || remainingSeconds <= 0) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setRemainingSeconds((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [isCountdown, remainingSeconds]);
+
+  const countdownLocked = isCountdown && remainingSeconds > 0;
+  const isDisabled = disabled || countdownLocked;
+  const progress =
+    isCountdown && initialCountdown > 0
+      ? (initialCountdown - remainingSeconds) / initialCountdown
+      : 1;
+
+  const widthClass = variant === "secondary" ? "w-1/2" : "w-full";
+  const baseClassName = [
+    "inline-flex",
+    widthClass,
+    "items-center",
+    "justify-center",
+    "rounded-[11px]",
+    "px-4",
+    "py-[14px]",
+    "text-center",
+    "transition-opacity",
+    isOutlined
+      ? "border border-[#8B8B8B] bg-transparent text-[#8B8B8B]"
+      : "bg-linear-to-tl from-[#FF8DF0] to-[#F14B46] text-white",
+    isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const renderArrow = (direction: ArrowDirection) => {
+    if (arrowDirection !== direction) {
+      return null;
+    }
+
+    return (
+      <GoArrowRight
+        aria-hidden="true"
+        className={[
+          "size-5",
+          direction === "left" ? "rotate-180" : "",
+          isOutlined ? "text-[#8B8B8B]" : "text-white",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      />
+    );
+  };
+
+  return (
+    <button
+      {...props}
+      type={type}
+      disabled={isDisabled}
+      aria-describedby={description && !isOutlined ? countdownId : undefined}
+      className={baseClassName}
+    >
+      <span className="flex w-full items-center justify-center gap-2">
+        {renderArrow("left")}
+        <span className="flex min-w-0 flex-col items-center justify-center">
+          <span className="text-center text-[16px] font-semibold leading-none">
+            {children}
+          </span>
+          {description && !isOutlined ? (
+            <span
+              id={countdownId}
+              className="mt-1 text-center text-[10px] font-semibold leading-none text-white"
+            >
+              {description}
+            </span>
+          ) : null}
+        </span>
+        {countdownLocked ? (
+          <span className="shrink-0">
+            <CountdownProgress value={remainingSeconds} progress={progress} />
+          </span>
+        ) : (
+          renderArrow("right")
+        )}
+      </span>
+    </button>
+  );
+}
+
+type CountdownProgressProps = {
+  value: number;
+  progress: number;
+};
+
+function CountdownProgress({ value, progress }: CountdownProgressProps) {
+  const dashOffset = CIRCUMFERENCE * (1 - progress);
+
+  return (
+    <span className="relative flex h-[27px] w-[27px] items-center justify-center">
+      <svg
+        aria-hidden="true"
+        className="-rotate-90"
+        viewBox="0 0 44 44"
+        width="27"
+        height="27"
+      >
+        <circle
+          cx="22"
+          cy="22"
+          r={RADIUS}
+          fill="none"
+          stroke={EMPTY_STROKE}
+          strokeWidth="4"
+        />
+        <circle
+          cx="22"
+          cy="22"
+          r={RADIUS}
+          fill="none"
+          stroke={FILLED_STROKE}
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeDasharray={CIRCUMFERENCE}
+          strokeDashoffset={dashOffset}
+        />
+      </svg>
+      <span className="absolute inset-0 flex items-center justify-center text-[12px] font-semibold leading-none text-white">
+        {value}
+      </span>
+    </span>
+  );
+}
+
+export default Button;
--- a/src/components/ui/info-progress-card.tsx
+++ b/src/components/ui/info-progress-card.tsx
@ -0,0 +1,93 @@
+import { IoInformation, IoInformationCircle, IoPerson } from "react-icons/io5";
+
+type InfoProgressCardProps = {
+  title: string;
+  requiredLabel?: string;
+  estimate: string;
+  progress: number;
+};
+
+const RADIUS = 12;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+export function InfoProgressCard({
+  title,
+  requiredLabel = "(Required)",
+  estimate,
+  progress,
+}: InfoProgressCardProps) {
+  const normalizedProgress = Math.max(0, Math.min(progress, 100));
+  const dashOffset = CIRCUMFERENCE - (normalizedProgress / 100) * CIRCUMFERENCE;
+
+  return (
+    <article className="flex items-center gap-4 rounded-[30px] bg-white px-7 py-7 shadow-[0_12px_40px_rgba(15,23,42,0.08)]">
+      <div className="relative flex h-[84px] w-[84px] shrink-0 items-center justify-center rounded-[22px] bg-linear-to-br from-[#EA3D59] to-[#F76B8A] text-white">
+        <IoPerson aria-hidden="true" className="translate-y-0.5 text-[38px]" />
+        <span className="absolute bottom-4 right-4 flex h-5 w-5 items-center justify-center rounded-full bg-white/18">
+          <IoInformation aria-hidden="true" className="text-[12px]" />
+        </span>
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 className="truncate text-[28px] leading-none font-extrabold tracking-[-0.03em] text-[#171717]">
+              {title}{" "}
+              <span className="text-[18px] font-bold text-[#FF5C6C]">
+                {requiredLabel}
+              </span>
+            </h2>
+            <p className="mt-4 text-[18px] font-semibold text-[#7A7A7A]">
+              Estimate time: {estimate}
+            </p>
+          </div>
+
+          <button
+            type="button"
+            aria-label="More information"
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-[#F24E63] text-white"
+          >
+            <IoInformationCircle aria-hidden="true" className="text-[20px]" />
+          </button>
+        </div>
+
+        <div className="mt-4 flex justify-end">
+          <div className="flex items-center gap-2">
+            <svg
+              aria-hidden="true"
+              className="-rotate-90"
+              viewBox="0 0 32 32"
+              width="28"
+              height="28"
+            >
+              <circle
+                cx="16"
+                cy="16"
+                r={RADIUS}
+                fill="none"
+                stroke="#E5E7EB"
+                strokeWidth="4"
+              />
+              <circle
+                cx="16"
+                cy="16"
+                r={RADIUS}
+                fill="none"
+                stroke="#222222"
+                strokeWidth="4"
+                strokeLinecap="round"
+                strokeDasharray={CIRCUMFERENCE}
+                strokeDashoffset={dashOffset}
+              />
+            </svg>
+            <span className="text-[20px] font-extrabold text-[#171717]">
+              {normalizedProgress}%
+            </span>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export default InfoProgressCard;
--- a/src/components/ui/navigation-button.tsx
+++ b/src/components/ui/navigation-button.tsx
@ -0,0 +1,71 @@
+"use client";
+
+import Image from "next/image";
+import type { ButtonHTMLAttributes } from "react";
+import { GoArrowLeft } from "react-icons/go";
+import { IoCloseOutline } from "react-icons/io5";
+
+type NavigationButtonIcon = "back" | "support" | "close";
+
+export type NavigationButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  icon: NavigationButtonIcon;
+  iconLabel?: string;
+};
+
+export function NavigationButton({
+  icon,
+  iconLabel,
+  type = "button",
+  className,
+  ...props
+}: NavigationButtonProps) {
+  const iconNode = (() => {
+    switch (icon) {
+      case "back":
+        return (
+          <GoArrowLeft aria-hidden="true" className="size-6 text-[#111111]" />
+        );
+      case "close":
+        return (
+          <IoCloseOutline
+            aria-hidden="true"
+            className="size-6 text-[#111111]"
+          />
+        );
+      case "support":
+        return (
+          <Image
+            src="/assets/images/support.svg"
+            alt=""
+            aria-hidden="true"
+            className="size-6"
+            width={24}
+            height={24}
+          />
+        );
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <button
+      {...props}
+      type={type}
+      aria-label={iconLabel ?? icon}
+      className={[
+        "inline-flex items-center justify-center rounded-[15px] bg-[#FFFFFF] p-2",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {iconNode}
+    </button>
+  );
+}
+
+export default NavigationButton;
--- a/src/components/utils/page-background.tsx
+++ b/src/components/utils/page-background.tsx
@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect } from "react";
+
+type PageBackgroundProps = {
+  image?: string;
+  disabled?: boolean;
+};
+
+export function PageBackground({
+  image,
+  disabled = false,
+}: PageBackgroundProps) {
+  useEffect(() => {
+    const { body } = document;
+    const previousMode = body.dataset.pageBackground;
+    const previousImage = body.style.getPropertyValue("--page-background-image");
+
+    if (disabled) {
+      body.dataset.pageBackground = "none";
+      body.style.removeProperty("--page-background-image");
+    } else if (image) {
+      body.dataset.pageBackground = "custom";
+      body.style.setProperty("--page-background-image", `url("${image}")`);
+    } else {
+      delete body.dataset.pageBackground;
+      body.style.removeProperty("--page-background-image");
+    }
+
+    return () => {
+      if (previousMode) {
+        body.dataset.pageBackground = previousMode;
+      } else {
+        delete body.dataset.pageBackground;
+      }
+
+      if (previousImage) {
+        body.style.setProperty("--page-background-image", previousImage);
+      } else {
+        body.style.removeProperty("--page-background-image");
+      }
+    };
+  }, [disabled, image]);
+
+  return null;
+}