{text}
+
setIsOpenPrivacyModal(false)}
+ />
+
+ Total today:
+ ${getPrice(product)} +Your cost per 2 weeks after trial
++ You are enrolling in 2 weeks subscription. By continuing you agree that + if you don't cancel prior to the end of the 3-day trial for the $ + {getPrice(product)} you will automatically be charged $19 every 2 weeks + until you cancel in settings. Learn more about cancellation and refund + policy in{" "} + Subscription policy +
+ > + ); +} + +export default PaymentTable; diff --git a/src/components/pages/Mike/v1/components/PaymentTable/styles.module.css b/src/components/pages/Mike/v1/components/PaymentTable/styles.module.css new file mode 100644 index 0000000..47f4fc8 --- /dev/null +++ b/src/components/pages/Mike/v1/components/PaymentTable/styles.module.css @@ -0,0 +1,129 @@ +.payment-table { + width: 100%; + margin-top: 50px; +} + +.header { + margin-bottom: 18px; +} + +.header .title { + margin-bottom: 18px; + font-size: 47px; + font-weight: 800; + text-align: center; +} + +.table-container { + padding: 13px; + margin-inline: 26px; + border-radius: 10px; + background: #fff; +} + +.table-container > hr { + margin: 10px 0; +} + +.title { + margin-bottom: 18px; + font-weight: 700; + font-size: 15px; + color: #0f0f0f; +} + +.table-element, +.table-footer { + display: flex; + -webkit-box-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + align-items: center; +} + +.table-element > p { + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #2c2c2c; +} + +.table-element > span { + font-weight: 800; + font-size: 19px; + line-height: 22px; + margin-left: 4px; + color: #2c2c2c; +} + +.table-footer > p, +.table-footer span { + font-size: 12px; +} + +.button { + height: 53px; + max-width: 360px; + width: 100%; + margin-top: 21px; + border-radius: 8px; +} + +.policy { + max-width: 336px; + font-size: 12px; + line-height: 20px; + font-weight: 300; + margin-top: 18px; + margin-inline: auto; +} + +.policy > a { + text-decoration: underline; + font-weight: 600; + cursor: pointer; +} + +.discount { + text-decoration: line-through; + align-self: flex-end; + font-weight: 400; + font-size: 12px; + line-height: 22px; + color: rgba(44, 44, 44, 0.6); + margin-right: 2px; +} + +.price { + font-size: 14px; +} + +.modal-container, +.iframe { + position: relative; + width: 100%; + height: 100%; +} + +.iframe { + pointer-events: all; +} + +.cross { + position: fixed; + top: 60px; + right: 20px; + width: 36px; + height: 36px; + padding: 8px; + border-radius: 100%; + background-color: #fff; + z-index: 10; + cursor: pointer; +} + +@media (max-width: 430px) { + .header .title { + font-size: 38px; + } +} diff --git a/src/components/pages/Mike/v1/components/PersonalInformation/index.tsx b/src/components/pages/Mike/v1/components/PersonalInformation/index.tsx new file mode 100644 index 0000000..9bb0aea --- /dev/null +++ b/src/components/pages/Mike/v1/components/PersonalInformation/index.tsx @@ -0,0 +1,54 @@ +import styles from "./styles.module.css"; + +interface IPersonalInformationProps { + birthdate: string; + zodiacSign: string; + gender: string; + birthPlace: string; + primaryColor?: string; +} + +function PersonalInformation({ + birthdate, + zodiacSign, + gender, + birthPlace, + primaryColor, +}: IPersonalInformationProps) { + return ( +
+ {zodiacSign}
+{gender}
+{birthdate}
+{birthPlace}
+{date}
+{text}
+
+ {t("mike.birthtime.description")}
+{t("we_dont_share")}
++ By continuing, you agree to our{" "} + + EULA + {" "} + and{" "} + + Privacy Notice + + . Have a question? Reach our support team{" "} + + here + +
+
+
+ Does my boyfried really love me?
++ Of course! Based on your’s and your boyfried’s natal charts your + are made for each other! The accuracy of an astrology reading + can vary and is subjective. Astrology is not an exact science, + but many find that it can provide valuable insights and + perspectives. Our platform uses advanced algorithms and expert + astrologers to provide the most accurate readings possible. +
++ The accuracy of an astrology reading can vary and is subjective. + Astrology is not an exact science, but many find that it can + provide valuable insights and perspectives. Our platform uses + advanced algorithms and expert astrologers to provide the most + accurate r +
+
+
+
+
+
+
+
+