Preview/additional purchases

2024-03-10 18:30:49 +00:00 · 2024-03-10 18:30:49 +00:00 · 866f798117
commit 866f798117
parent bd995211c5
53 changed files with 1717 additions and 2 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -23,6 +23,8 @@
        "react-i18next": "^12.3.1",
        "react-redux": "^8.0.5",
        "react-router-dom": "^6.11.2",
+        "react-slick": "^0.30.2",
+        "slick-carousel": "^1.8.1",
        "unique-names-generator": "^4.7.1"
      },
      "devDependencies": {
@ -31,6 +33,7 @@
        "@types/react": "^18.2.6",
        "@types/react-dom": "^18.2.4",
        "@types/react-router-dom": "^5.3.3",
+        "@types/react-slick": "^0.23.13",
        "@typescript-eslint/eslint-plugin": "^5.59.6",
        "@typescript-eslint/parser": "^5.59.6",
        "@vitejs/plugin-react": "^4.0.0",
@ -1093,6 +1096,15 @@
        "@types/react-router": "*"
      }
    },
+    "node_modules/@types/react-slick": {
+      "version": "0.23.13",
+      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
+      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.3",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@ -1492,6 +1504,11 @@
        "node": ">=4"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -1642,6 +1659,11 @@
      "integrity": "sha512-TFeOKd98TpJzRHkr4Aorn16QkMnuCQuGAE6IZ0wYF+qkbSfMPqjplvRppR02tMUpVxZz8nyBNvVm9lIZsqrbPQ==",
      "dev": true
    },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -2439,6 +2461,12 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -2480,6 +2508,14 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
    "node_modules/json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@ -2520,6 +2556,11 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@ -2982,6 +3023,22 @@
        "react-dom": ">=16.8"
      }
    },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/redux": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@ -3008,6 +3065,11 @@
      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -3152,6 +3214,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -3161,6 +3231,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@ -4146,6 +4221,15 @@
        "@types/react-router": "*"
      }
    },
+    "@types/react-slick": {
+      "version": "0.23.13",
+      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
+      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/scheduler": {
      "version": "0.16.3",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@ -4390,6 +4474,11 @@
        "supports-color": "^5.3.0"
      }
    },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
    "color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -4505,6 +4594,11 @@
      "integrity": "sha512-TFeOKd98TpJzRHkr4Aorn16QkMnuCQuGAE6IZ0wYF+qkbSfMPqjplvRppR02tMUpVxZz8nyBNvVm9lIZsqrbPQ==",
      "dev": true
    },
+    "enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -5094,6 +5188,12 @@
      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
      "dev": true
    },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -5126,6 +5226,14 @@
      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
      "dev": true
    },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
    "json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@ -5151,6 +5259,11 @@
        "p-locate": "^5.0.0"
      }
    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
    "lodash.merge": {
      "version": "4.6.2",
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@ -5454,6 +5567,18 @@
        "react-router": "6.11.2"
      }
    },
+    "react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
    "redux": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
@ -5478,6 +5603,11 @@
      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@ -5572,12 +5702,23 @@
      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
      "dev": true
    },
+    "slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "requires": {}
+    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
      "dev": true
    },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
    "strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -25,6 +25,8 @@
    "react-i18next": "^12.3.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.2",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
    "unique-names-generator": "^4.7.1"
  },
  "devDependencies": {
@ -33,6 +35,7 @@
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "@types/react-router-dom": "^5.3.3",
+    "@types/react-slick": "^0.23.13",
    "@typescript-eslint/eslint-plugin": "^5.59.6",
    "@typescript-eslint/parser": "^5.59.6",
    "@vitejs/plugin-react": "^4.0.0",
--- a/public/check-mark-1.svg
+++ b/public/check-mark-1.svg
@ -0,0 +1,7 @@
+<svg width="14" height="12" viewBox="0 0 60 46" fill="white"
+    style="display: block; width: 14px; height: 12px; color: rgb(106, 58, 162);" xmlns="http://www.w3.org/2000/svg"
+    class="sc-424b5a3f-12 knbDkO">
+    <path
+        d="M19.5009 35.9989L5.5009 21.9989L0.834229 26.6655L19.5009 45.3322L59.5009 5.33219L54.8342 0.665527L19.5009 35.9989Z">
+    </path>
+</svg>
--- a/public/circle-with-dote.svg
+++ b/public/circle-with-dote.svg
@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+    <title>Circle with dot inside</title>
+    <circle cx="15" cy="15" r="14" fill="#FFF0F0" stroke="url(#paint0_linear_903_1210)" stroke-width="2" />
+    <circle cx="15.2941" cy="15.2941" r="5.29412" fill="url(#paint1_linear_903_1210)" />
+    <defs>
+        <linearGradient id="paint0_linear_903_1210" x1="-5.43932e-08" y1="13.6028" x2="41.6683" y2="14.0412"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC" />
+            <stop offset="1" stop-color="#F2994A" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_903_1210" x1="10" y1="14.801" x2="24.7065" y2="14.9557"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC" />
+            <stop offset="1" stop-color="#F2994A" />
+        </linearGradient>
+    </defs>
+</svg>
--- a/public/crystal_ball.png
+++ b/public/crystal_ball.png
--- a/public/get_on_appstore.webp
+++ b/public/get_on_appstore.webp
--- a/public/get_on_google_play.webp
+++ b/public/get_on_google_play.webp
--- a/public/input_numbers.png
+++ b/public/input_numbers.png
--- a/public/premium_intro.webp
+++ b/public/premium_intro.webp
--- a/public/premium_intro_2.webp
+++ b/public/premium_intro_2.webp
--- a/public/premium_intro_3.webp
+++ b/public/premium_intro_3.webp
--- a/public/premium_intro_4.webp
+++ b/public/premium_intro_4.webp
--- a/public/premium_intro_5.webp
+++ b/public/premium_intro_5.webp
--- a/public/rised_hand.png
+++ b/public/rised_hand.png
--- a/public/smiling-face-with-hearts.png
+++ b/public/smiling-face-with-hearts.png
--- a/public/sunset.png
+++ b/public/sunset.png
--- a/public/technologist.png
+++ b/public/technologist.png
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@ -99,6 +99,10 @@ import MarketingTrialPayment from "../pages/EmailLetters/MarketingTrialPayment";
 import { ScrollToTop } from "@/hooks/scrollToTop";
 import { EUserDeviceType } from "@/store/userConfig";
 import TryAppPage from "../pages/TryApp";
+import AdditionalPurchases from "../pages/AdditionalPurchases";
+import AddReportPage from "../pages/AdditionalPurchases/pages/AddReport";
+import UnlimitedReadingsPage from "../pages/AdditionalPurchases/pages/UnlimitedReadings";
+import AddConsultationPage from "../pages/AdditionalPurchases/pages/AddConsultation";

 const isProduction = import.meta.env.MODE === "production";

@ -323,6 +327,14 @@ function App(): JSX.Element {
        />
        {/* Email Letters End */}

+        {/* Additional Purchases */}
+        <Route element={<AdditionalPurchases />}>
+          <Route path={routes.client.addReport()} element={<AddReportPage />} />
+          <Route path={routes.client.unlimitedReadings()} element={<UnlimitedReadingsPage />} />
+          <Route path={routes.client.addConsultation()} element={<AddConsultationPage />} />
+        </Route>
+        {/* Additional Purchases End */}
+
        <Route
          path={routes.client.paymentResult()}
          element={<PaymentResultPage />}
--- a/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/checkMark.svg
+++ b/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/checkMark.svg
@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
+    <circle cx="15" cy="15" r="15" fill="url(#paint0_linear_901_1205)" />
+    <path d="M11.8 18.8805L7.6 14.7014L6.2 16.0944L11.8 21.6666L23.8 9.72629L22.4 8.33325L11.8 18.8805Z"
+        fill="#FBFBFF" />
+    <defs>
+        <linearGradient id="paint0_linear_901_1205" x1="-5.43932e-08" y1="13.6028" x2="41.6683" y2="14.0412"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC" />
+            <stop offset="1" stop-color="#F2994A" />
+        </linearGradient>
+    </defs>
+</svg>
--- a/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/index.tsx
@ -0,0 +1,71 @@
+import { IAdditionalPurchasesStep } from "@/data/additionalPurchases";
+import styles from "./styles.module.css";
+import { useRef } from "react";
+import CheckMark from "./checkMark.svg";
+
+interface IAdditionalPurchasesStepsProps {
+  steps: IAdditionalPurchasesStep[];
+  activeStep: number;
+}
+
+function AdditionalPurchasesSteps({
+  steps,
+  activeStep,
+}: IAdditionalPurchasesStepsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const titlesRef = useRef<Array<HTMLSpanElement | null>>([]);
+  const circleSize = 30;
+
+  return (
+    <div ref={containerRef} className={styles.container}>
+      <div className={styles["steps-container"]}>
+        {steps.map(({ title, id }, index) => (
+          <div className={styles["step-with-line"]} key={index}>
+            <div
+              className={`${styles.step} ${
+                activeStep === id ? styles.active : ""
+              }`}
+            >
+              <span
+                ref={(el) => (titlesRef.current[index] = el)}
+                className={`${styles.title} ${
+                  index === 0 && styles["title-first"]
+                } ${index === steps.length - 1 && styles["title-last"]}`}
+                key={index}
+              >
+                {title}
+              </span>
+              {activeStep < id && (
+                <div
+                  className={styles.circle}
+                  style={{
+                    width: `${circleSize}px`,
+                    height: `${circleSize}px`,
+                  }}
+                />
+              )}
+              {activeStep === id && (
+                <img src="/circle-with-dote.svg" alt="Circle with dote" />
+              )}
+              {activeStep > id && (
+                <img src={CheckMark} alt="Circle with dote" />
+              )}
+            </div>
+
+            {/* {id !== steps.length - 1 && (
+              <div
+                className={`${styles.line}`}
+                style={{
+                  width: `${lineWidth}px`,
+                }}
+              />
+            )} */}
+          </div>
+        ))}
+        <div className={`${styles.line}`} />
+      </div>
+    </div>
+  );
+}
+
+export default AdditionalPurchasesSteps;
--- a/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/styles.module.css
@ -0,0 +1,102 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+
+.titles-container {
+  position: relative;
+  min-height: 32px;
+  height: fit-content;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.steps-container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 50px;
+}
+
+.step-with-line {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+  z-index: 9;
+}
+
+.title {
+  position: absolute;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 16px;
+  color: #4f4f4f;
+  width: min-content;
+  text-align: center;
+  bottom: 32px;
+  /* min-width: 74px; */
+}
+
+.active .title {
+  font-weight: 600;
+}
+
+.title-first {
+  width: max-content;
+  left: 0;
+}
+
+.title-last {
+  right: 0;
+  text-align: right;
+}
+
+.circle {
+  background: rgb(255, 240, 240);
+  border: 2px solid rgb(236, 200, 188);
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dote {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background: red;
+}
+
+.line {
+  width: 100%;
+  height: 2px;
+  background-color: #ecc8bc;
+  position: absolute;
+  bottom: 14px;
+  left: 0;
+  z-index: 7;
+}
+
+.active .line {
+  background-color: green;
+}
--- a/src/components/pages/AdditionalPurchases/components/ConsultationTable/icon.svg
+++ b/src/components/pages/AdditionalPurchases/components/ConsultationTable/icon.svg
@ -0,0 +1,46 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"
+    class="sc-fd3dee34-7 itgNg">
+    <rect width="60" height="60" rx="8" fill="#E8E8FC"></rect>
+    <path
+        d="M42.7118 33.5777L48.4694 27.233C49.0922 26.5465 49.9614 26.1362 50.8858 26.0923C51.8102 26.0485 52.7141 26.3748 53.3987 26.9994L39.2637 48.3678"
+        stroke="url(#paint0_linear_12028_3919)" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M30.3242 48.374C30.3242 42.982 30.3242 42.982 32.6794 40.4997L39.2054 33.3103C39.6062 32.8823 40.1587 32.6295 40.7437 32.6066C41.3286 32.5837 41.8991 32.7925 42.3319 33.1879C42.7647 33.5832 43.0252 34.1335 43.0571 34.7198C43.0889 35.3062 42.8897 35.8816 42.5023 36.3218L38.2697 40.9869"
+        stroke="url(#paint1_linear_12028_3919)" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M17.9349 33.5792L12.1774 27.2345C11.8691 26.8946 11.4972 26.619 11.0827 26.4233C10.6683 26.2276 10.2195 26.1157 9.76192 26.094C9.30437 26.0723 8.84704 26.1412 8.41604 26.2968C7.98505 26.4524 7.58882 26.6917 7.25 27.0009L21.385 48.3693"
+        stroke="url(#paint2_linear_12028_3919)" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M30.3263 48.3743C30.3263 42.9822 30.3263 42.9822 27.9691 40.4999L21.4451 33.3105C21.047 32.8717 20.4914 32.6095 19.9005 32.5816C19.3097 32.5537 18.732 32.7624 18.2946 33.1617C17.8571 33.5611 17.5957 34.1184 17.5679 34.7111C17.5401 35.3037 17.7481 35.8832 18.1462 36.3221L22.3808 40.9872"
+        stroke="url(#paint3_linear_12028_3919)" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path
+        d="M42.2191 16.591C42.1335 13.228 39.4996 10.5 36.147 10.5C33.9093 10.5 31.6576 11.6783 30.3218 13.22C28.9839 11.6783 26.7323 10.5 24.4945 10.5C21.142 10.5 18.51 13.228 18.4244 16.591C18.2393 23.9082 28.1279 30.5244 30.3218 31.8385C32.5137 30.5224 42.4043 23.9062 42.2191 16.591Z"
+        stroke="url(#paint4_linear_12028_3919)" stroke-linecap="round" stroke-linejoin="round"></path>
+    <defs>
+        <linearGradient id="paint0_linear_12028_3919" x1="39.2637" y1="36.1905" x2="58.8978" y2="36.3216"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC"></stop>
+            <stop offset="1" stop-color="#F2994A"></stop>
+        </linearGradient>
+        <linearGradient id="paint1_linear_12028_3919" x1="30.3242" y1="39.7551" x2="48.0147" y2="39.9054"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC"></stop>
+            <stop offset="1" stop-color="#F2994A"></stop>
+        </linearGradient>
+        <linearGradient id="paint2_linear_12028_3919" x1="7.25" y1="36.1921" x2="26.8841" y2="36.3231"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC"></stop>
+            <stop offset="1" stop-color="#F2994A"></stop>
+        </linearGradient>
+        <linearGradient id="paint3_linear_12028_3919" x1="17.5654" y1="39.7411" x2="35.2902" y2="39.8917"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC"></stop>
+            <stop offset="1" stop-color="#F2994A"></stop>
+        </linearGradient>
+        <linearGradient id="paint4_linear_12028_3919" x1="18.4219" y1="20.1755" x2="51.4776" y2="20.5633"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#6A4DBC"></stop>
+            <stop offset="1" stop-color="#F2994A"></stop>
+        </linearGradient>
+    </defs>
+</svg>
--- a/src/components/pages/AdditionalPurchases/components/ConsultationTable/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/ConsultationTable/index.tsx
@ -0,0 +1,40 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import Icon from "./icon.svg";
+
+function ConsultationTable() {
+  return (
+    <div className={styles.container}>
+      <Title variant="h2" className={styles.title}>
+        Your unique individual consultation
+      </Title>
+      <div className={styles.line} />
+      <div className={styles["center-container"]}>
+        <div className={styles.header}>
+          <img src={Icon} alt="Icon" />
+          <p>
+            <span>30-minute private </span>
+            <span>consultation with an expert</span>
+          </p>
+        </div>
+        <p className={styles.text}>
+          You can ask for prediction of the future, live compatibility analysis;
+          love compatibility etc
+        </p>
+      </div>
+      <div className={styles.line} />
+      <div className={styles.footer}>
+        <span className={styles["one-time-price"]}>One time price offer: </span>
+        <span className={styles["current-price"]}>$49.99</span>
+        <br />
+        <span className={styles["old-price-container"]}>
+          Original price:
+          <span className={styles["old-price"]}> $99.99</span>
+          <span className={styles.save}> Save 50%</span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default ConsultationTable;
--- a/src/components/pages/AdditionalPurchases/components/ConsultationTable/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/ConsultationTable/styles.module.css
@ -0,0 +1,112 @@
+.container {
+  margin: 24px auto 0;
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  max-width: 320px;
+  position: relative;
+  background: rgb(251, 251, 255);
+  border-radius: 16px;
+  width: 100%;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 135%;
+  color: rgb(40, 40, 97);
+  text-align: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+.line {
+  width: 100%;
+  height: 1px;
+  background: rgb(212, 198, 229);
+}
+
+.center-container {
+  padding: 20px;
+}
+
+.center-container > .header {
+  display: flex;
+}
+
+.center-container > .header > img {
+  width: 44px;
+  height: 44px;
+}
+
+.center-container > .header > p {
+  color: rgb(106, 58, 162);
+  font-weight: 600;
+  font-size: 16px;
+  margin-left: 12px;
+  line-height: 135%;
+}
+
+.center-container > .header > p > span {
+  -webkit-text-fill-color: transparent;
+  font-weight: 400;
+  background: linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      )
+      text,
+    linear-gradient(90.6deg, rgb(106, 77, 188) 0.47%, rgb(242, 153, 74) 137.94%);
+  background-clip: text;
+  color: rgb(106, 58, 162);
+}
+
+.center-container > .text {
+  color: rgb(52, 52, 52);
+  font-size: 14px;
+  line-height: 135%;
+  margin-top: 12px;
+}
+
+.footer {
+  padding: 20px;
+  width: 100%;
+}
+
+.one-time-price {
+  color: rgb(40, 40, 97);
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.current-price {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: rgb(40, 40, 97);
+}
+
+.old-price-container {
+  color: rgb(130, 130, 130);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.old-price {
+  text-decoration: line-through rgb(130, 130, 130);
+}
+
+.save {
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  background: linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.2),
+        rgba(255, 255, 255, 0.2)
+      )
+      text,
+    linear-gradient(90.6deg, rgb(106, 77, 188) 0.47%, rgb(242, 153, 74) 137.94%);
+  background-clip: text;
+}
--- a/src/components/pages/AdditionalPurchases/components/FirstSlide/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/FirstSlide/index.tsx
@ -0,0 +1,38 @@
+import { firstSliderList } from "@/data/additionalPurchases";
+import styles from "./styles.module.css";
+
+function FirstSlide() {
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.image}
+        src="/premium_intro.webp"
+        alt="Premium Intro"
+      />
+      <div className={styles["right-half"]}>
+        {firstSliderList.map((item, index) => (
+          <p className={styles.item} key={index}>
+            <span style={{ backgroundImage: `url(${item.icon})` }} />
+            {item.title}
+          </p>
+        ))}
+        <p className={styles.item}>
+          <span style={{ top: 0 }}>5</span>
+          minutes to read
+        </p>
+        <div className={styles.bottom}>
+          <div className={styles.links}>
+            <img src="/get_on_appstore.webp" alt="get on appstore" />
+            <img src="/get_on_google_play.webp" alt="get on google play" />
+          </div>
+          <p className={styles.price}>
+            $14
+            <sup>59</sup>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FirstSlide;
--- a/src/components/pages/AdditionalPurchases/components/FirstSlide/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/FirstSlide/styles.module.css
@ -0,0 +1,74 @@
+.container {
+  width: 100%;
+  background-color: rgb(241, 225, 247);
+  border-radius: 4px;
+  padding: 12px 8px;
+  display: flex !important;
+}
+
+.image {
+  width: calc(50% - 8px);
+  height: 189px;
+  object-fit: contain;
+}
+
+.right-half {
+  display: flex;
+  flex-direction: column;
+  margin-left: 6px;
+}
+
+.item {
+  font-size: 10px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.item > span {
+  display: inline-block;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 18px;
+  height: 18px;
+  margin-right: 6px;
+  position: relative;
+  flex-shrink: 0;
+  top: -4px;
+  font-size: 18px;
+  font-weight: 700;
+  color: rgb(85, 84, 144);
+}
+
+.bottom {
+  margin-top: auto;
+  display: flex;
+  align-items: flex-end;
+}
+
+.bottom .links {
+  display: flex;
+  flex-direction: column;
+  margin-right: 12px;
+  gap: 2px;
+}
+
+.bottom > .price {
+  border-radius: 4px;
+  padding: 8px 8px;
+  background: rgb(60, 60, 132);
+  color: rgb(251, 251, 255);
+  font-weight: 700;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  font-size: 28px;
+}
+
+.bottom > .price > sup {
+  font-size: 14px;
+  position: relative;
+  top: -10px;
+}
--- a/src/components/pages/AdditionalPurchases/components/FooterButton/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/FooterButton/index.tsx
@ -0,0 +1,36 @@
+import MainButton from "@/components/MainButton";
+import styles from "./styles.module.css";
+
+interface IFooterButtonProps {
+  classNameContainer?: string;
+  classNameButton?: string;
+  classNameSkip?: string;
+  children?: React.ReactNode;
+  onClick: () => void;
+  onClickSkip: () => void;
+}
+
+function FooterButton({
+  children,
+  onClick,
+  onClickSkip,
+  classNameContainer = "",
+  classNameButton = "",
+  classNameSkip = "",
+}: IFooterButtonProps) {
+  return (
+    <div className={`${styles.container} ${classNameContainer}`}>
+      <MainButton
+        className={`${styles.button} ${classNameButton}`}
+        onClick={onClick}
+      >
+        {children}
+      </MainButton>
+      <p onClick={onClickSkip} className={`${styles.skip} ${classNameSkip}`}>
+        Skip this offer and proceed further
+      </p>
+    </div>
+  );
+}
+
+export default FooterButton;
--- a/src/components/pages/AdditionalPurchases/components/FooterButton/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/FooterButton/styles.module.css
@ -0,0 +1,55 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  -webkit-box-align: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0px;
+  padding-bottom: 20px;
+  z-index: 5;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.container::before {
+  content: "";
+  position: absolute;
+  inset: -10px 0px 0px;
+  background: linear-gradient(
+    rgba(255, 240, 240, 0) 0%,
+    rgba(255, 240, 240, 0.95) 53.81%
+  );
+}
+
+.button {
+  border-radius: 12px;
+  margin-bottom: 10px;
+  min-height: 0;
+  height: 50px;
+  max-width: 360px;
+  width: 100%;
+  background: linear-gradient(
+    165.54deg,
+    rgb(20, 19, 51) -33.39%,
+    rgb(32, 34, 97) 15.89%,
+    rgb(84, 60, 151) 55.84%,
+    #6939a2 74.96%
+  );
+  color: rgb(251, 251, 255);
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.skip {
+  text-decoration: underline;
+  width: 310px;
+  font-size: 14px;
+  text-align: center;
+  z-index: 5;
+  user-select: none;
+  cursor: pointer;
+}
--- a/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx
@ -0,0 +1,9 @@
+import styles from "./styles.module.css"
+
+function PaymentAddress() {
+  return (
+    <p className={styles.address}>500 N RAINBOW BLVD LAS VEGAS, NV 89107</p>
+  )
+}
+
+export default PaymentAddress
--- a/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css
@ -0,0 +1,7 @@
+.address {
+  max-width: 360px;
+  font-size: 10px;
+  text-align: center;
+  margin-top: 9px;
+  color: rgb(130, 130, 130);
+}
--- a/src/components/pages/AdditionalPurchases/components/SignUpOffer/check-mark-1.svg
+++ b/src/components/pages/AdditionalPurchases/components/SignUpOffer/check-mark-1.svg
@ -0,0 +1,7 @@
+<svg width="14" height="12" viewBox="0 0 60 46" fill="white"
+    style="display: block; width: 14px; height: 12px; color: rgb(106, 58, 162);" xmlns="http://www.w3.org/2000/svg"
+    class="sc-424b5a3f-12 knbDkO">
+    <path
+        d="M19.5009 35.9989L5.5009 21.9989L0.834229 26.6655L19.5009 45.3322L59.5009 5.33219L54.8342 0.665527L19.5009 35.9989Z">
+    </path>
+</svg>
--- a/src/components/pages/AdditionalPurchases/components/SignUpOffer/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/SignUpOffer/index.tsx
@ -0,0 +1,53 @@
+import { ISignUpOffer } from "@/data/additionalPurchases";
+import styles from "./styles.module.css";
+import CheckMark from "./check-mark-1.svg";
+
+interface ISignUpOfferProps extends ISignUpOffer {
+  isActive: boolean;
+  onClick: () => void;
+}
+
+function SignUpOffer(props: ISignUpOfferProps) {
+  const { id, title, subtitle, emoji, isActive, onClick } = props;
+  const { current, old, discount } = props.price;
+
+  return (
+    <div
+      className={`${styles.container} ${isActive && styles.active}`}
+      onClick={onClick}
+    >
+      <div className={styles.mark}>
+        {isActive && <img src={CheckMark} alt="Checkmark" />}
+      </div>
+      <div className={styles["text-container"]}>
+        <div className={styles["title-container"]}>
+          <p className={styles.title}>{title}</p>
+          {id === "ultra-pack" && (
+            <span className={styles.discount}>{discount}% OFF</span>
+          )}
+        </div>
+        {!!subtitle?.length && (
+          <span className={styles.subtitle}>{subtitle}</span>
+        )}
+        <div className={styles["price-container"]}>
+          <span className={styles.price}>
+            <span className={styles["current-price"]}>${current}</span> ({" "}
+            {id === "ultra-pack" ? "regular price" : "was"}{" "}
+            <span className={styles["old-price"]}>${old}</span> )
+          </span>
+          {id !== "ultra-pack" && (
+            <div className={styles["discount-container"]}>
+              <span className={styles.discount}>{discount}% OFF</span>
+            </div>
+          )}
+        </div>
+      </div>
+      <span
+        className={styles.emoji}
+        style={{ backgroundImage: `url(/${emoji})` }}
+      ></span>
+    </div>
+  );
+}
+
+export default SignUpOffer;
--- a/src/components/pages/AdditionalPurchases/components/SignUpOffer/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/SignUpOffer/styles.module.css
@ -0,0 +1,137 @@
+.container {
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  border: unset;
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 12px 16px;
+  margin-left: auto;
+  margin-right: auto;
+  box-shadow: rgba(84, 60, 151, 0.25) 2px 2px 6px;
+  border-radius: 12px;
+  color: rgb(56, 13, 68);
+  max-width: 450px;
+  width: 100%;
+  background: rgb(255, 255, 255);
+}
+
+.container.active {
+  background: linear-gradient(
+    125.02deg,
+    rgba(100, 43, 115, 0.2) 18.39%,
+    rgba(198, 66, 110, 0.2) 81.83%
+  );
+  border: 2px solid rgb(214, 166, 232);
+}
+
+.mark {
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  border: 1px solid rgb(212, 198, 229);
+}
+
+.active .mark {
+  background: linear-gradient(
+    125.02deg,
+    rgb(100, 43, 115) 18.39%,
+    rgb(198, 66, 110) 81.83%
+  );
+}
+
+.text-container {
+  display: flex;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  margin-left: 16px;
+}
+
+.title-container {
+  width: 100%;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+}
+
+.title {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 16px;
+  line-height: 135%;
+}
+
+.subtitle {
+  color: rgb(56, 13, 68);
+  font-size: 14px;
+  line-height: 135%;
+  margin-bottom: 5px;
+}
+
+.price-container {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgb(79, 79, 79);
+}
+
+.current-price {
+  font-size: 14px;
+}
+
+.old-price {
+  color: rgb(106, 58, 162);
+  text-decoration: line-through;
+}
+
+.discount-container {
+  background: rgb(232, 232, 252);
+  border-radius: 4px;
+  display: inline-block;
+  margin-left: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.discount {
+  background: linear-gradient(
+      165.54deg,
+      rgb(20, 19, 51) -33.39%,
+      rgb(32, 34, 97) 15.89%,
+      rgb(84, 60, 151) 55.84%,
+      rgb(105, 57, 162) 74.96%
+    )
+    text;
+  font-size: 12px;
+  line-height: 170%;
+  -webkit-text-fill-color: transparent;
+}
+
+.emoji {
+  display: inline-block;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  margin-left: 3px;
+}
+
+.title-container > .discount {
+  background: rgb(201, 137, 225);
+  border-radius: 4px;
+  margin-left: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: 12px;
+  line-height: 170%;
+  color: rgb(251, 251, 255);
+  -webkit-text-fill-color: unset;
+}
--- a/src/components/pages/AdditionalPurchases/components/SliderNextArrow/arrow.svg
+++ b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/arrow.svg
@ -0,0 +1,9 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-role="none"
+    class="sc-4de4bcfd-4 NUBTT slick-arrow slick-prev slick-disabled" currentSlide="0" slideCount="3"
+    style="display: block;">
+    <title>White circle with purple arrow pointing to the right</title>
+    <rect x="0.5" width="24" height="24" rx="12" fill="#FBFBFF"></rect>
+    <path
+        d="M5 11.25C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75V11.25ZM20.5303 12.5303C20.8232 12.2374 20.8232 11.7626 20.5303 11.4697L15.7574 6.6967C15.4645 6.40381 14.9896 6.40381 14.6967 6.6967C14.4038 6.98959 14.4038 7.46447 14.6967 7.75736L18.9393 12L14.6967 16.2426C14.4038 16.5355 14.4038 17.0104 14.6967 17.3033C14.9896 17.5962 15.4645 17.5962 15.7574 17.3033L20.5303 12.5303ZM5 12.75L20 12.75V11.25L5 11.25V12.75Z"
+        fill="#393860"></path>
+</svg>
--- a/src/components/pages/AdditionalPurchases/components/SliderNextArrow/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/index.tsx
@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import styles from "./styles.module.css";
+import Arrow from "./arrow.svg";
+
+function SliderNextArrow(
+  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+) {
+  const { className, style, onClick } = props;
+  return (
+    <img
+      src={Arrow}
+      className={`${styles.arrow} ${className}`}
+      style={{ ...style, display: "block" }}
+      onClick={onClick}
+    />
+  );
+}
+
+export default SliderNextArrow;
--- a/src/components/pages/AdditionalPurchases/components/SliderNextArrow/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/styles.module.css
@ -0,0 +1,6 @@
+.arrow {
+  z-index: 2 !important;
+  width: 24px !important;
+  height: 24px !important;
+  right: -12px !important;
+}
--- a/src/components/pages/AdditionalPurchases/components/SliderPrevArrow/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/SliderPrevArrow/index.tsx
@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import styles from "./styles.module.css";
+import Arrow from "../SliderNextArrow/arrow.svg";
+
+function SliderPrevArrow(
+  props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+) {
+  const { className, style, onClick } = props;
+  return (
+    <img
+      src={Arrow}
+      className={`${styles.arrow} ${className}`}
+      style={{ ...style, display: "block" }}
+      onClick={onClick}
+    />
+  );
+}
+
+export default SliderPrevArrow;
--- a/src/components/pages/AdditionalPurchases/components/SliderPrevArrow/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/SliderPrevArrow/styles.module.css
@ -0,0 +1,7 @@
+.arrow {
+  z-index: 2 !important;
+  width: 24px !important;
+  height: 24px !important;
+  left: -12px !important;
+  transform: translate(0px, -50%) scale(-1) !important;
+}
--- a/src/components/pages/AdditionalPurchases/components/ThankYouBanner/index.tsx
+++ b/src/components/pages/AdditionalPurchases/components/ThankYouBanner/index.tsx
@ -0,0 +1,22 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+
+function ThankYouBanner() {
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.image}
+        src="/smiling-face-with-hearts.png"
+        alt="Love"
+      />
+      <div className={styles["text-container"]}>
+        <Title variant="h4" className={styles.title}>
+          Thank you!
+        </Title>
+        <p className={styles.text}>Your order was successful!</p>
+      </div>
+    </div>
+  );
+}
+
+export default ThankYouBanner;
--- a/src/components/pages/AdditionalPurchases/components/ThankYouBanner/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/components/ThankYouBanner/styles.module.css
@ -0,0 +1,32 @@
+.container {
+  width: 100%;
+  padding: 6px 20px;
+  background-color: #a5a3f3;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 15px;
+  color: #fff;
+  height: min-content;
+  margin-top: 12px;
+}
+
+.image {
+  height: 34px;
+  aspect-ratio: 1 / 1;
+}
+
+.title {
+  text-align: left;
+  margin-bottom: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 135%;
+}
+
+.text {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
--- a/src/components/pages/AdditionalPurchases/index.tsx
+++ b/src/components/pages/AdditionalPurchases/index.tsx
@ -0,0 +1,19 @@
+import { Outlet } from "react-router-dom";
+import AdditionalPurchasesSteps from "./components/AdditionalPurchasesSteps";
+import styles from "./styles.module.css";
+import { steps } from "@/data/additionalPurchases";
+
+function AdditionalPurchases() {
+  const activeStep = steps.findIndex((value) =>
+    window.location.href.includes(value.link)
+  );
+
+  return (
+    <section className={`${styles.page} page`}>
+      <AdditionalPurchasesSteps steps={steps} activeStep={activeStep} />
+      <Outlet />
+    </section>
+  );
+}
+
+export default AdditionalPurchases;
--- a/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddConsultation/index.tsx
@ -0,0 +1,39 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import ConsultationTable from "../../components/ConsultationTable";
+import PaymentAddress from "../../components/PaymentAddress";
+import FooterButton from "../../components/FooterButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+function AddConsultationPage() {
+  const navigate = useNavigate();
+  const handleNext = () => {
+    navigate(routes.client.home());
+  };
+  return (
+    <div className={styles.container}>
+      <Title variant="h2" className={styles.title}>
+        More for you
+      </Title>
+      <Title variant="h2" className={styles.subtitle}>
+        Exclusive offer recommended for you to achieve your goals faster
+      </Title>
+      <ConsultationTable />
+      <p className={styles.description}>
+        *You will be charged for the add-on services or offers selected at the
+        time of purchase.
+        <br />
+        This is a non-recuring payment.
+      </p>
+      <PaymentAddress />
+      <FooterButton
+        onClick={handleNext}
+        onClickSkip={handleNext}
+        children="Get my consultation"
+      />
+    </div>
+  );
+}
+
+export default AddConsultationPage;
--- a/src/components/pages/AdditionalPurchases/pages/AddConsultation/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/pages/AddConsultation/styles.module.css
@ -0,0 +1,38 @@
+.container {
+  width: 100%;
+  padding-bottom: 120px;
+}
+
+.title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 135%;
+  color: rgb(51, 51, 51);
+  margin-top: 12px;
+  margin-bottom: 0;
+}
+
+.subtitle {
+  font-size: 18px;
+  text-align: center;
+  font-weight: 400;
+  color: rgb(106, 58, 162);
+  margin-bottom: 0;
+  max-width: 460px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 135%;
+}
+
+.description {
+  margin-top: 24px;
+  margin-bottom: 20px;
+  font-size: 12px;
+  max-width: 330px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  line-height: 140%;
+  color: rgb(79, 79, 79);
+}
--- a/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
@ -0,0 +1,55 @@
+import Title from "@/components/Title";
+import ThankYouBanner from "../../components/ThankYouBanner";
+import styles from "./styles.module.css";
+import { signUpOffers } from "@/data/additionalPurchases";
+import SignUpOffer from "../../components/SignUpOffer";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import FooterButton from "../../components/FooterButton";
+import routes from "@/routes";
+import PaymentAddress from "../../components/PaymentAddress";
+
+function AddReportPage() {
+  const navigate = useNavigate();
+  const [activeOffer, setActiveOffer] = useState(signUpOffers[0].id);
+
+  const handleClick = () => {
+    navigate(routes.client.unlimitedReadings());
+  };
+
+  return (
+    <div className={styles.container}>
+      <ThankYouBanner />
+      <Title variant="h2" className={styles.title}>
+        Choose your sign-up offer 🔥
+      </Title>
+      <Title variant="h3" className={styles.subtitle}>
+        Available only now
+      </Title>
+      <div className={styles["offers-container"]}>
+        {signUpOffers.map((offer, index) => (
+          <SignUpOffer
+            key={index}
+            id={offer.id}
+            title={offer.title}
+            subtitle={offer.subtitle}
+            price={offer.price}
+            emoji={offer.emoji}
+            isActive={offer.id === activeOffer}
+            onClick={() => setActiveOffer(offer.id)}
+          />
+        ))}
+      </div>
+      <p className={styles.description}>
+        *You will be charged for the add-on services or offers selected at the
+        time of purchase. This is a non-recuring payment.
+      </p>
+      <PaymentAddress />
+      <FooterButton onClick={handleClick} onClickSkip={handleClick}>
+        Get my copy
+      </FooterButton>
+    </div>
+  );
+}
+
+export default AddReportPage;
--- a/src/components/pages/AdditionalPurchases/pages/AddReport/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/pages/AddReport/styles.module.css
@ -0,0 +1,58 @@
+.container {
+  width: 100%;
+  padding-bottom: 120px;
+}
+
+.offers-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.description {
+  text-align: center;
+  font-size: 14px;
+  margin-top: 16px;
+}
+
+.address {
+  color: gray;
+  font-size: 10px;
+  text-align: center;
+  margin-top: 16px;
+}
+
+.title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 135%;
+  color: rgb(51, 51, 51);
+  margin-top: 16px;
+  margin-bottom: 0;
+}
+
+.subtitle {
+  font-size: 18px;
+  text-align: center;
+  font-weight: 400;
+  color: rgb(106, 58, 162);
+  margin-bottom: 8px;
+  max-width: 460px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 135%;
+}
+
+.description {
+  max-width: 526px;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-size: 12px;
+  line-height: 140%;
+  margin-bottom: 20px;
+  color: rgb(79, 79, 79);
+}
--- a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
+++ b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
@ -0,0 +1,79 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import { unlimitedReadings } from "@/data/additionalPurchases";
+import FooterButton from "../../components/FooterButton";
+import { useNavigate } from "react-router-dom";
+import Slider from "react-slick";
+import FirstSlide from "../../components/FirstSlide";
+import SliderNextArrow from "../../components/SliderNextArrow";
+import SliderPrevArrow from "../../components/SliderPrevArrow";
+import routes from "@/routes";
+import PaymentAddress from "../../components/PaymentAddress";
+
+function UnlimitedReadingsPage() {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate(routes.client.addConsultation());
+  };
+
+  const sliderSettings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    className: styles["slider-container"],
+    nextArrow: <SliderNextArrow />,
+    prevArrow: <SliderPrevArrow />,
+  };
+
+  return (
+    <div className={styles.container}>
+      <Slider {...sliderSettings}>
+        <FirstSlide />
+        <div className={styles.slider}>
+          <img src="/premium_intro_2.webp" alt="Premium Intro" />
+          <img src="/premium_intro_3.webp" alt="Premium Intro" />
+        </div>
+        <div className={styles.slider}>
+          <img src="/premium_intro_4.webp" alt="Premium Intro" />
+          <img src="/premium_intro_5.webp" alt="Premium Intro" />
+        </div>
+      </Slider>
+      <Title variant="h2" className={styles.title}>
+        Access the unlimited astrology guides and compatibility readings
+      </Title>
+      <ul className={styles.list}>
+        {unlimitedReadings.map(({ title, icon }, index) => (
+          <li className={styles.item} key={index}>
+            <span
+              className={styles.image}
+              style={{ backgroundImage: `url(${icon})` }}
+            />
+            <span className={styles.text}>{title}</span>
+          </li>
+        ))}
+      </ul>
+      <FooterButton
+        onClick={handleClick}
+        onClickSkip={handleClick}
+        classNameContainer={styles["buttons-container"]}
+        classNameButton={styles.button}
+        classNameSkip={styles.skip}
+      >
+        Add unlimited readings
+      </FooterButton>
+      <p className={styles.policy}>
+        Please note: In addition to your subscription, your account will be
+        charged €14.59 for the selected add-ons as you click Add unlimited
+        readings. Items on this page are 30 days subscriptions. Unless you
+        cancel it in your profile before the end of the then-current period, you
+        agree that the subscription will renew automatically at the end of each
+        period. If you need help with how to cancel, visit our
+      </p>
+      <PaymentAddress />
+    </div>
+  );
+}
+
+export default UnlimitedReadingsPage;
--- a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/styles.module.css
@ -0,0 +1,84 @@
+.container {
+  width: 100%;
+}
+
+.title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 135%;
+  color: rgb(51, 51, 51);
+  margin-top: 30px;
+  margin-bottom: 20px;
+}
+
+.list .item {
+  display: flex;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.item > .image {
+  display: inline-block;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  position: relative;
+  top: 2px;
+  flex-shrink: 0;
+}
+
+.buttons-container {
+  position: relative;
+  padding: 0;
+  margin-top: 20px;
+}
+
+.button {
+  font-weight: 600;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
+  position: sticky;
+  bottom: 10px;
+  max-width: 400px;
+  margin-top: 20px;
+  height: 53px;
+}
+
+.skip {
+  text-decoration: underline;
+  font-size: 14px;
+  text-align: center;
+  z-index: 5;
+  color: rgb(130, 130, 130);
+  margin-top: 16px;
+  width: 100%;
+}
+
+.policy {
+  color: rgb(79, 79, 79);
+  font-size: 10px;
+  max-width: 474px;
+  margin-top: 24px;
+  line-height: 1.5;
+}
+
+.slider-container {
+  margin-top: 12px;
+}
+
+.slider {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  padding: 12px 8px;
+  display: flex !important;
+}
+
+.slider > img {
+  width: calc(50% - 8px);
+  height: 189px;
+  object-fit: contain;
+}
--- a/src/components/pages/AdditionalPurchases/styles.module.css
+++ b/src/components/pages/AdditionalPurchases/styles.module.css
@ -0,0 +1,11 @@
+.page {
+  position: relative;
+  height: fit-content;
+  min-height: calc(100dvh - 50px);
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: column;
+  background: rgb(255, 240, 240);
+  width: 100%;
+}
--- a/src/components/pages/QuestionnaireIntermediate/index.tsx
+++ b/src/components/pages/QuestionnaireIntermediate/index.tsx
@ -6,6 +6,7 @@ import routes from "@/routes";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
 import { textVariables } from "@/data";
+import StaryKey from "./starry_key.svg";

 function QuestionnaireIntermediatePage() {
  const navigate = useNavigate();
@ -38,6 +39,7 @@ function QuestionnaireIntermediatePage() {
        backgroundImage: `url(${backgroundImage})`,
      }}
    >
+      <object type="image/svg+xml" data={StaryKey}>svg-animation</object>
      <img
        src="/starry_key.svg"
        alt="The starry key"
--- a/src/components/pages/QuestionnaireIntermediate/starry_key.svg
+++ b/src/components/pages/QuestionnaireIntermediate/starry_key.svg
@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197 138" width="197" height="138"
+    preserveAspectRatio="xMidYMid slice"
+    style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;">
+    <defs>
+        <clipPath id="__lottie_element_298">
+            <rect width="197" height="138" x="0" y="0"></rect>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#__lottie_element_298)">
+        <g transform="matrix(1,0,0,1,178.375,80.0739974975586)" opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,9.75,16.25)">
+                <path fill="rgb(155,171,217)" fill-opacity="1"
+                    d=" M0,-16 C5.247000217437744,-16 9.5,-8.836000442504883 9.5,0 C9.5,8.836999893188477 5.247000217437744,16 0,16 C-5.247000217437744,16 -9.5,8.836999893188477 -9.5,0 C-9.5,-8.836000442504883 -5.247000217437744,-16 0,-16z">
+                </path>
+            </g>
+            <g opacity="1" transform="matrix(1,0,0,1,10.25,40.25)">
+                <path fill="rgb(155,171,217)" fill-opacity="1"
+                    d=" M-5.428999900817871,-17 C-5.428999900817871,-17 4.427000045776367,-17 4.427000045776367,-17 C4.427000045776367,-17 6,17 6,17 C6,17 -6,12 -6,12 C-6,12 -5.428999900817871,-17 -5.428999900817871,-17z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(1.0000094175338745,0,0,1.0000094175338745,141.95191955566406,21.779918670654297)"
+            opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,8.640999794006348,8.642000198364258)">
+                <path fill="rgb(222,227,248)" fill-opacity="1"
+                    d=" M7.629000186920166,-0.7639999985694885 C3.8299999237060547,-0.7639999985694885 0.7639999985694885,-3.8299999237060547 0.7639999985694885,-7.629000186920166 C0.7639999985694885,-8.055999755859375 0.42800000309944153,-8.392000198364258 0.0010000000474974513,-8.392000198364258 C-0.4269999861717224,-8.392000198364258 -0.7639999985694885,-8.055999755859375 -0.7639999985694885,-7.629000186920166 C-0.7639999985694885,-3.8299999237060547 -3.8299999237060547,-0.7639999985694885 -7.630000114440918,-0.7639999985694885 C-8.055999755859375,-0.7639999985694885 -8.390999794006348,-0.42899999022483826 -8.390999794006348,-0.0010000000474974513 C-8.390999794006348,0.4259999990463257 -8.055999755859375,0.7620000243186951 -7.630000114440918,0.7620000243186951 C-3.8299999237060547,0.7620000243186951 -0.7639999985694885,3.8299999237060547 -0.7639999985694885,7.629000186920166 C-0.7639999985694885,8.055999755859375 -0.4269999861717224,8.392000198364258 0.0010000000474974513,8.392000198364258 C0.42800000309944153,8.392000198364258 0.7639999985694885,8.055999755859375 0.7639999985694885,7.629000186920166 C0.7639999985694885,3.8299999237060547 3.8299999237060547,0.7620000243186951 7.629000186920166,0.7620000243186951 C8.057000160217285,0.7620000243186951 8.390999794006348,0.4259999990463257 8.390999794006348,-0.0010000000474974513 C8.390999794006348,-0.42899999022483826 8.057000160217285,-0.7639999985694885 7.629000186920166,-0.7639999985694885z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(0.9999973177909851,0,0,0.9999973177909851,65.25801849365234,0.58502197265625)" opacity="1"
+            style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,8.121000289916992,8.121999740600586)">
+                <path fill="rgb(155,171,217)" fill-opacity="1"
+                    d=" M7.15500020980835,-0.7160000205039978 C3.5920000076293945,-0.7160000205039978 0.7160000205039978,-3.5929999351501465 0.7160000205039978,-7.156000137329102 C0.7160000205039978,-7.558000087738037 0.4000000059604645,-7.872000217437744 -0.0010000000474974513,-7.872000217437744 C-0.4009999930858612,-7.872000217437744 -0.7160000205039978,-7.558000087738037 -0.7160000205039978,-7.156000137329102 C-0.7160000205039978,-3.5929999351501465 -3.5920000076293945,-0.7160000205039978 -7.156000137329102,-0.7160000205039978 C-7.556000232696533,-0.7160000205039978 -7.870999813079834,-0.4020000100135803 -7.870999813079834,0 C-7.870999813079834,0.4000000059604645 -7.556000232696533,0.7160000205039978 -7.156000137329102,0.7160000205039978 C-3.5920000076293945,0.7160000205039978 -0.7160000205039978,3.5920000076293945 -0.7160000205039978,7.156000137329102 C-0.7160000205039978,7.557000160217285 -0.4009999930858612,7.872000217437744 -0.0010000000474974513,7.872000217437744 C0.4000000059604645,7.872000217437744 0.7160000205039978,7.557000160217285 0.7160000205039978,7.156000137329102 C0.7160000205039978,3.5920000076293945 3.5920000076293945,0.7160000205039978 7.15500020980835,0.7160000205039978 C7.556000232696533,0.7160000205039978 7.870999813079834,0.4000000059604645 7.870999813079834,0 C7.870999813079834,-0.4020000100135803 7.556000232696533,-0.7160000205039978 7.15500020980835,-0.7160000205039978z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(0.9999902844429016,0,0,0.9999902844429016,16.25016212463379,4.074161529541016)" opacity="1"
+            style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,16.618000030517578,16.618000030517578)">
+                <path fill="rgb(222,227,248)" fill-opacity="1"
+                    d=" M14.880999565124512,-1.4880000352859497 C7.46999979019165,-1.4880000352859497 1.4880000352859497,-7.46999979019165 1.4880000352859497,-14.880999565124512 C1.4880000352859497,-15.71399974822998 0.8339999914169312,-16.368000030517578 0.0010000000474974513,-16.368000030517578 C-0.8330000042915344,-16.368000030517578 -1.4880000352859497,-15.71399974822998 -1.4880000352859497,-14.880999565124512 C-1.4880000352859497,-7.46999979019165 -7.46999979019165,-1.4880000352859497 -14.880999565124512,-1.4880000352859497 C-15.71399974822998,-1.4880000352859497 -16.368000030517578,-0.8339999914169312 -16.368000030517578,0 C-16.368000030517578,0.8330000042915344 -15.71399974822998,1.4880000352859497 -14.880999565124512,1.4880000352859497 C-7.46999979019165,1.4880000352859497 -1.4880000352859497,7.46999979019165 -1.4880000352859497,14.880000114440918 C-1.4880000352859497,15.713000297546387 -0.8330000042915344,16.368000030517578 0.0010000000474974513,16.368000030517578 C0.8339999914169312,16.368000030517578 1.4880000352859497,15.713000297546387 1.4880000352859497,14.880000114440918 C1.4880000352859497,7.46999979019165 7.46999979019165,1.4880000352859497 14.880999565124512,1.4880000352859497 C15.71399974822998,1.4880000352859497 16.368000030517578,0.8330000042915344 16.368000030517578,0 C16.368000030517578,-0.8339999914169312 15.71399974822998,-1.4880000352859497 14.880999565124512,-1.4880000352859497z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,1,98.5,69)" opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path fill="rgb(155,171,217)" fill-opacity="1"
+                    d=" M60.3129997253418,32.625 C60.3129997253418,32.625 27.75,32.9379997253418 27.75,32.9379997253418 C27.75,32.9379997253418 27.575000762939453,40.25400161743164 28,45.25 C28.25,48.1879997253418 29.5,48.625 30.812999725341797,49.9379997253418 C32.125999450683594,51.250999450683594 34.6879997253418,51.75 34.6879997253418,51.75 C34.6879997253418,51.75 34.53099822998047,42.90700149536133 43.625,42.9379997253418 C53,42.970001220703125 53.0629997253418,52.0629997253418 53.0629997253418,52.0629997253418 C53.0629997253418,52.0629997253418 57.3129997253418,50.0629997253418 58.3129997253418,48.6879997253418 C59.3129997253418,47.3129997253418 60.125,46.125 60.125,44.75 C60.125,43.8120002746582 60.3129997253418,32.625 60.3129997253418,32.625z">
+                </path>
+                <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+                    stroke="rgb(155,171,217)" stroke-opacity="1" stroke-width="0"
+                    d=" M60.3129997253418,32.625 C60.3129997253418,32.625 27.75,32.9379997253418 27.75,32.9379997253418 C27.75,32.9379997253418 27.575000762939453,40.25400161743164 28,45.25 C28.25,48.1879997253418 29.5,48.625 30.812999725341797,49.9379997253418 C32.125999450683594,51.250999450683594 34.6879997253418,51.75 34.6879997253418,51.75 C34.6879997253418,51.75 34.53099822998047,42.90700149536133 43.625,42.9379997253418 C53,42.970001220703125 53.0629997253418,52.0629997253418 53.0629997253418,52.0629997253418 C53.0629997253418,52.0629997253418 57.3129997253418,50.0629997253418 58.3129997253418,48.6879997253418 C59.3129997253418,47.3129997253418 60.125,46.125 60.125,44.75 C60.125,43.8120002746582 60.3129997253418,32.625 60.3129997253418,32.625z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,1,99.25,69)" opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+                    stroke="rgb(222,228,248)" stroke-opacity="1" stroke-width="9"
+                    d=" M-47.5,28.75 C-47.5,28.75 66.25,28.5 66.25,28.5"></path>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,0.8412700295448303,98.5,73.54364776611328)" opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(1,0,0,1,0,0)">
+                <path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+                    stroke="rgb(155,171,217)" stroke-opacity="1" stroke-width="8"
+                    d=" M-12.25,20.75 C-12.25,20.75 -12.25,36.5 -12.25,36.5"></path>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,1,98.5,69)" opacity="1" style="display: block;">
+            <g opacity="1" transform="matrix(0.8959500193595886,0,0,0.8725699782371521,-71.5,28.5)">
+                <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
+                    stroke="rgb(222,228,248)" stroke-opacity="1" stroke-width="8"
+                    d=" M0,-32.75 C14.34939956665039,-32.75 26,-18.074724197387695 26,0 C26,18.074724197387695 14.34939956665039,32.75 0,32.75 C-14.34939956665039,32.75 -26,18.074724197387695 -26,0 C-26,-18.074724197387695 -14.34939956665039,-32.75 0,-32.75z">
+                </path>
+            </g>
+        </g>
+        <g transform="matrix(1,0,0,1,98.5,69)" opacity="1" style="display: block;"></g>
+    </g>
+</svg>
--- a/src/data/additionalPurchases.ts
+++ b/src/data/additionalPurchases.ts
@ -0,0 +1,140 @@
+export interface IAdditionalPurchasesStep {
+  id: number;
+  title: string;
+  link: string;
+}
+
+export const steps: IAdditionalPurchasesStep[] = [
+  {
+    id: 0,
+    title: "Add Report",
+    link: "add-report",
+  },
+  {
+    id: 1,
+    title: "Unlimited Readings",
+    link: "unlimited-readings",
+  },
+  {
+    id: 2,
+    title: "Add Consultation",
+    link: "add-consultation",
+  },
+  {
+    id: 3,
+    title: "Access Product",
+    link: "",
+  },
+];
+
+interface ISignUpOfferPrice {
+  current: number;
+  old?: number;
+  discount?: number;
+}
+
+export interface ISignUpOffer {
+  id: string;
+  title: string;
+  subtitle?: string;
+  price: ISignUpOfferPrice;
+  emoji: string;
+}
+
+export const signUpOffers: ISignUpOffer[] = [
+  {
+    id: "ultra-pack",
+    title: "ULTRA PACK",
+    subtitle: "(3 in 1 + 2 secret bonus reading)",
+    price: {
+      current: 49.99,
+      old: 99.99,
+      discount: 50,
+    },
+    emoji: "star_struck.png",
+  },
+  {
+    id: "numerology-analyses",
+    title: "NUMEROLOGY ANALYSIS",
+    price: {
+      current: 14.99,
+      old: 29.99,
+      discount: 50,
+    },
+    emoji: "input_numbers.png",
+  },
+  {
+    id: "tarot-reading",
+    title: "TAROT READING",
+    price: {
+      current: 19.99,
+      old: 34.99,
+      discount: 45,
+    },
+    emoji: "sunset.png",
+  },
+  {
+    id: "palmistry-guide",
+    title: "PALMISTRY GUIDE",
+    price: {
+      current: 19.99,
+      old: 29.99,
+      discount: 30,
+    },
+    emoji: "rised_hand.png",
+  },
+];
+
+interface IUnlimitedReadings {
+  id: number;
+  title: string;
+  icon: string;
+}
+
+export const unlimitedReadings: IUnlimitedReadings[] = [
+  {
+    id: 0,
+    title: "check compatibility as many times as you need",
+    icon: "/woman-heart-man.png",
+  },
+  {
+    id: 1,
+    title:
+      "hundreds of insights to help you to achieve your relationship goals",
+    icon: "/sparkles.png",
+  },
+  {
+    id: 2,
+    title: "personalized daily horoscopes and astrological guides with no ads",
+    icon: "/crystal_ball.png",
+  },
+  {
+    id: 3,
+    title: "auto-renewable 1-month plan, cancel anytime",
+    icon: "/check_mark_button.png",
+  },
+];
+
+interface IFirstSliderItem {
+  id: number;
+  title: string;
+  icon: string;
+}
+
+export const firstSliderList: IFirstSliderItem[] = [
+  {
+    id: 0,
+    title: "personal affirmations for everyday",
+    icon: "/crystal_ball.png",
+  },
+  {
+    id: 1,
+    title: "more insight in less time",
+    icon: "/sparkles.png",
+  },
+  {
+    id: 2,
+    title: "learn visually",
+    icon: "/technologist.png",
+  },
+];
--- a/src/index.css
+++ b/src/index.css
@ -1,3 +1,6 @@
+@import "slick-carousel/slick/slick.css";
+@import "slick-carousel/slick/slick-theme.css";
+
 * {
  box-sizing: border-box;
  font-family: SF Pro Text, sans-serif;
@ -162,10 +165,10 @@ div[class^="divider"] {
  font-family: SF Pro Text Regular, sans-serif;
 }

-* {
+/* * {
  scrollbar-color: #cde8f9 #fff;
  scrollbar-width: auto;
-}
+} */

 ::-webkit-scrollbar {
  width: 0px;
@ -239,3 +242,7 @@ textarea {
  position: fixed;
  overflow: hidden;
 }
+
+.slick-disabled {
+  opacity: 0.5 !important;
+}
--- a/src/routes.ts
+++ b/src/routes.ts
@ -81,6 +81,12 @@ const routes = {

    // Email letters
    email: (path: string) => [host, "email", path].join("/"),
+
+    // Additional Purchases
+    addReport: () => [host, "add-report"].join("/"),
+    unlimitedReadings: () => [host, "unlimited-readings"].join("/"),
+    addConsultation: () => [host, "add-consultation"].join("/"),
+
    notFound: () => [host, "404"].join("/"),
  },
  server: {
@ -233,6 +239,9 @@ export const withoutFooterRoutes = [
  routes.client.email("marketing-landing"),
  routes.client.email("marketing-trial-payment"),
  routes.client.tryApp(),
+  routes.client.addReport(),
+  routes.client.unlimitedReadings(),
+  routes.client.addConsultation(),
 ];

 export const withoutFooterPartOfRoutes = [routes.client.questionnaire()];