+
+ );
+}
+
+export default AdditionalPurchasesSteps;
diff --git a/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/styles.module.css b/src/components/pages/AdditionalPurchases/components/AdditionalPurchasesSteps/styles.module.css
new file mode 100644
index 0000000..fbf56d9
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/components/ConsultationTable/icon.svg b/src/components/pages/AdditionalPurchases/components/ConsultationTable/icon.svg
new file mode 100644
index 0000000..94aaea4
--- /dev/null
+++ b/src/components/pages/AdditionalPurchases/components/ConsultationTable/icon.svg
@@ -0,0 +1,46 @@
+
\ No newline at end of file
diff --git a/src/components/pages/AdditionalPurchases/components/ConsultationTable/index.tsx b/src/components/pages/AdditionalPurchases/components/ConsultationTable/index.tsx
new file mode 100644
index 0000000..6b323e4
--- /dev/null
+++ 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 (
+
+ {steps.map(({ title, id }, index) => (
+
+
+
+ ))}
+
+
+ (titlesRef.current[index] = el)}
+ className={`${styles.title} ${
+ index === 0 && styles["title-first"]
+ } ${index === steps.length - 1 && styles["title-last"]}`}
+ key={index}
+ >
+ {title}
+
+ {activeStep < id && (
+
+ )}
+ {activeStep === id && (
+ 
+ )}
+ {activeStep > id && (
+ 
+ )}
+
+
+ {/* {id !== steps.length - 1 && (
+
+ )} */}
+
+ )}
+ {activeStep > id && (
+
+
+ Your unique individual consultation
+
+
+
+ );
+}
+
+export default ConsultationTable;
diff --git a/src/components/pages/AdditionalPurchases/components/ConsultationTable/styles.module.css b/src/components/pages/AdditionalPurchases/components/ConsultationTable/styles.module.css
new file mode 100644
index 0000000..4c260ea
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/components/FirstSlide/index.tsx b/src/components/pages/AdditionalPurchases/components/FirstSlide/index.tsx
new file mode 100644
index 0000000..a18f263
--- /dev/null
+++ 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 (
+
+
+
+
+ 
+
+ + 30-minute private + consultation with an expert +
++ You can ask for prediction of the future, live compatibility analysis; + love compatibility etc +
+
+ One time price offer:
+ $49.99
+
+ + Original price: + $99.99 + Save 50% + +
+ + + Original price: + $99.99 + Save 50% + +
+ 
+
+ );
+}
+
+export default FirstSlide;
diff --git a/src/components/pages/AdditionalPurchases/components/FirstSlide/styles.module.css b/src/components/pages/AdditionalPurchases/components/FirstSlide/styles.module.css
new file mode 100644
index 0000000..e24ef63
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/components/FooterButton/index.tsx b/src/components/pages/AdditionalPurchases/components/FooterButton/index.tsx
new file mode 100644
index 0000000..de0eae2
--- /dev/null
+++ 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 (
+
+
+ {firstSliderList.map((item, index) => (
+
+ + + {item.title} +
+ ))} ++ 5 + minutes to read +
+
+
+
+ 
+ 
+
+
+
+ + $14 + 59 +
+
+
+ {children}
+
+
+ );
+}
+
+export default FooterButton;
diff --git a/src/components/pages/AdditionalPurchases/components/FooterButton/styles.module.css b/src/components/pages/AdditionalPurchases/components/FooterButton/styles.module.css
new file mode 100644
index 0000000..1109cec
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx b/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx
new file mode 100644
index 0000000..35a69b9
--- /dev/null
+++ b/src/components/pages/AdditionalPurchases/components/PaymentAddress/index.tsx
@@ -0,0 +1,9 @@
+import styles from "./styles.module.css"
+
+function PaymentAddress() {
+ return (
+ + Skip this offer and proceed further +
+500 N RAINBOW BLVD LAS VEGAS, NV 89107
+ ) +} + +export default PaymentAddress \ No newline at end of file diff --git a/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css b/src/components/pages/AdditionalPurchases/components/PaymentAddress/styles.module.css new file mode 100644 index 0000000..4e8b4f9 --- /dev/null +++ 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); +} diff --git a/src/components/pages/AdditionalPurchases/components/SignUpOffer/check-mark-1.svg b/src/components/pages/AdditionalPurchases/components/SignUpOffer/check-mark-1.svg new file mode 100644 index 0000000..0671ab2 --- /dev/null +++ b/src/components/pages/AdditionalPurchases/components/SignUpOffer/check-mark-1.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/src/components/pages/AdditionalPurchases/components/SignUpOffer/index.tsx b/src/components/pages/AdditionalPurchases/components/SignUpOffer/index.tsx new file mode 100644 index 0000000..9c015b5 --- /dev/null +++ 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 ( +
+
+ );
+}
+
+export default SignUpOffer;
diff --git a/src/components/pages/AdditionalPurchases/components/SignUpOffer/styles.module.css b/src/components/pages/AdditionalPurchases/components/SignUpOffer/styles.module.css
new file mode 100644
index 0000000..692466e
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/components/SliderNextArrow/arrow.svg b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/arrow.svg
new file mode 100644
index 0000000..1430fb2
--- /dev/null
+++ b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/arrow.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/components/pages/AdditionalPurchases/components/SliderNextArrow/index.tsx b/src/components/pages/AdditionalPurchases/components/SliderNextArrow/index.tsx
new file mode 100644
index 0000000..3238e39
--- /dev/null
+++ 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
+ {isActive && }
+
+
+
+
+
+
+ {!!subtitle?.length && (
+ {subtitle}
+ )}
+ {title}
+ {id === "ultra-pack" && ( + {discount}% OFF + )} +
+
+ ${current} ({" "}
+ {id === "ultra-pack" ? "regular price" : "was"}{" "}
+ ${old} )
+
+ {id !== "ultra-pack" && (
+
+
+ {discount}% OFF
+
+ )}
+
+ 
+
+ );
+}
+
+export default ThankYouBanner;
diff --git a/src/components/pages/AdditionalPurchases/components/ThankYouBanner/styles.module.css b/src/components/pages/AdditionalPurchases/components/ThankYouBanner/styles.module.css
new file mode 100644
index 0000000..f6a1b89
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/index.tsx b/src/components/pages/AdditionalPurchases/index.tsx
new file mode 100644
index 0000000..36a39aa
--- /dev/null
+++ 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 (
+
+
+
+ Thank you!
+
+
+ Your order was successful!
+
+
+ More for you
+
+
+ Exclusive offer recommended for you to achieve your goals faster
+
+
+ );
+}
+
+export default AddConsultationPage;
diff --git a/src/components/pages/AdditionalPurchases/pages/AddConsultation/styles.module.css b/src/components/pages/AdditionalPurchases/pages/AddConsultation/styles.module.css
new file mode 100644
index 0000000..345f5a5
--- /dev/null
+++ 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);
+}
diff --git a/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx b/src/components/pages/AdditionalPurchases/pages/AddReport/index.tsx
new file mode 100644
index 0000000..51b7fd5
--- /dev/null
+++ 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 (
+
+ *You will be charged for the add-on services or offers selected at the
+ time of purchase.
+
+ This is a non-recuring payment.
+
+
+ Choose your sign-up offer 🔥
+
+
+ Available only now
+
+
+ Get my copy
+
+
+ );
+}
+
+export default AddReportPage;
diff --git a/src/components/pages/AdditionalPurchases/pages/AddReport/styles.module.css b/src/components/pages/AdditionalPurchases/pages/AddReport/styles.module.css
new file mode 100644
index 0000000..4aa5861
--- /dev/null
+++ 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);
+}
diff --git a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/index.tsx
new file mode 100644
index 0000000..50e8db8
--- /dev/null
+++ 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:
+ {signUpOffers.map((offer, index) => (
+ setActiveOffer(offer.id)}
+ />
+ ))}
+
+ + *You will be charged for the add-on services or offers selected at the + time of purchase. This is a non-recuring payment. +
+
+
+
+
+ Access the unlimited astrology guides and compatibility readings
+
+
+ Add unlimited readings
+
+
+ );
+}
+
+export default UnlimitedReadingsPage;
diff --git a/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/styles.module.css b/src/components/pages/AdditionalPurchases/pages/UnlimitedReadings/styles.module.css
new file mode 100644
index 0000000..271d6e7
--- /dev/null
+++ 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;
+}
diff --git a/src/components/pages/AdditionalPurchases/styles.module.css b/src/components/pages/AdditionalPurchases/styles.module.css
new file mode 100644
index 0000000..533a347
--- /dev/null
+++ 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%;
+}
diff --git a/src/components/pages/QuestionnaireIntermediate/index.tsx b/src/components/pages/QuestionnaireIntermediate/index.tsx
index d9302d9..1425252 100644
--- 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})`,
}}
>
+
+ 
+ 
+
+
+
+
+ 
+ 
+
+
+
+ -
+ {unlimitedReadings.map(({ title, icon }, index) => (
+
- + + {title} + + ))} +
+ 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 +
+
+