diff --git a/public/locales/v1/en/female_en.json b/public/locales/v1/en/female_en.json index 89c2bf2..6ff6bc4 100644 --- a/public/locales/v1/en/female_en.json +++ b/public/locales/v1/en/female_en.json @@ -620,6 +620,12 @@ "title": "PALMISTRY GUIDE", "discount": "% OFF", "price": " ( was )" + }, + "skip_offer": { + "title": "SKIP OFFER", + "discount": "% OFF", + "price": " ( was )", + "description": "You are missing out on both readings" } }, "description": "*You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment." @@ -671,5 +677,212 @@ }, "/trial-choice": { "button": "Choose an amount that you think is reasonable." + }, + "skip_trial": "Skip Trial", + "add_consultant": "Add Consultant", + "add_guides": "Add Guides", + "/skip-trial": { + "title": "Not planning on looking back?", + "price_per_week": " per week", + "billing_period": "Billing period", + "billed_amount": "Billed amount", + "billed_in_4_weeks": "Billed in 4 weeks", + "start_trial": { + "every_week": "Every week", + "start_trial": "Start trial" + }, + "skip_trial": { + "save": "save %", + "every_4_weeks": "Every 4 weeks", + "skip_trial": "Accept offer and skip trial" + } + }, + "/add-consultant": { + "caution": "Caution!", + "caution_text": "To prevent double charges please don`t close the page and don`t go back.", + "unlock_profound": "Unlock profound insights into your personality, relationships, career trajectory, and life's pivotal moments through astrology, empowering you to make informed decisions and achieve greater fulfillment.", + "choose_from": "Choose from 80+ experts astrologers." + }, + "palmistry-v1": { + "next": "Next", + "/find-your-happiness": { + "title": "Find your happiness with highly-personalized predictions.", + "point1": "rated by real users", + "point2": "93.4% Accuracy", + "point3": "20m users’ choice", + "point4": "4.8 satisfaction sco", + "text": "Understand your self and improve relationships with astrology" + }, + "/gender": { + "title": "What’s your gender?", + "description": "In Palmistry, everyone is a blend of masculine and feminine, so it helps to know yours." + }, + "/birthdate": { + "title": "What’s your date of birth?", + "text": "Your birth date reveals your core personality traits, needs and desires." + }, + "/palms-information": { + "title": "Your palms hold a wealth of information about your fate and personality." + }, + "/what-aspects": { + "title": "What aspects of your life do you wish to gain insight into through palmistry?", + "answer1": "Love & Relationships", + "answer2": "Health & Vitality", + "answer3": "Career & Destiny" + }, + "/relationship-status": { + "title": "So we can get to know you better, please tell us your relationship status", + "answer1": "Single", + "answer2": "In a relationship" + }, + "/element-resonates": { + "title": "Which element resonates with you most?", + "answer1": "Water", + "answer2": "Fire", + "answer3": "Air", + "answer4": "Earth" + }, + "/favorite-color": { + "title": "Which color do you like the most?", + "answer1": "Blue", + "answer2": "Green", + "answer3": "Orange", + "answer4": "Violet", + "answer5": "Red", + "answer6": "Yellow" + }, + "/head-or-heart": { + "title": "Do you make decisions with your head or your heart?", + "answer1": "Heart", + "answer2": "Head", + "answer3": "Both" + }, + "/relate-following": { + "title": "Do you relate to the following:", + "question1": "I find solace and comfort in spending time alone.", + "question2": "I value and enjoy my own company.", + "question3": "I prefer socializing in groups rather than spending time alone.", + "question4": "Loneliness is something I actively try to avoid.", + "question5": "I enjoy activities that I can do independently.", + "strongly_agree": "Strongly Agree", + "strongly_disagree": "Strongly Disagree" + }, + "/let-scan": { + "title": "Let`s scan your palms", + "text": "Follow the on-screen instructions, so we can analyze your palm lines and reveal your future, and the secrets of your destiny!" + }, + "biometric_data": "No biometric data collected. All recognition process performs on your device.", + "/scan-instruction": { + "title": "Take your palm picture as instructed", + "button": "Take a picture now" + }, + "/email": { + "title": "Enter your email to get your advanced Palmistry reading with AURA", + "not_share": "We don’t share any personal information." + }, + "went_wrong": "Something went wrong.", + "app_number_one": { + "text": "The app trusted by over 25 million people.", + "color": "#1 Astrology" + }, + "/trial-payment": { + "palm_is_ready": { + "title": "Your Palm Reading ", + "title_color": "Is Ready", + "description": "“I’ve just received your palm scan results. Let’s discuss!”", + "text1": " 6 years in palmistry readings and spiritual guidance.", + "text1_color": "Akho", + "text2": "Choose from 80+ palm readers and astrologers." + }, + "joined_today": { + "text1": "Unlimited chats with a palm reader", + "text2": " people joined today" + }, + "get_personal_prediction": "Get personal prediction", + "how_work": { + "title": "How does AURA work?", + "point1_title": "Send us your palm scan", + "point1_text": "We analyze your palm lines to get hints about your future", + "point2_title": "Your palm reading is generated", + "point2_text": "One of our professional palm readers puts together a report filled with hints about your future", + "point3_title": "Start your trial to receive your prediction", + "point3_text": "Once you’re a AURA member, we’ll send over your prediction report so you can begin living a better life.", + "point4_title": "Talk with a palm reading specialist anytime", + "point4_text": "Get ongoing support by discussing your readings, personal horoscopes, and compatibilities with our expert team." + }, + "money_back_guarantee": { + "title": "100% Money-back Guarantee", + "text": "If you don’t notice any progress after using the app for at least a week, we are ready to make a complete refund within 14 days." + }, + "begin_trial_now": "Begin Trial Now", + "what_included": { + "title": "What’s included?", + "point1": " palm readings", + "point1_bold": "Unlimited", + "point2": " with professional astrologers", + "point2_bold": "1:1 live chats", + "point3": " readings", + "point3_bold": "Daily compatibility", + "point4": "Cosmic relationship tips", + "point5": "Daily horoscopes" + }, + "palms_say_about": { + "title": "What do your palms say about you?", + "point1": " shows your attitude to love and the quality of love", + "point1_color": "Love line", + "point2": "A long thumb indicates good fortune", + "point3": " reflects your in telligence and mentality", + "point3_color": "Head line", + "point4": "A long index finger indicates a natural leader", + "point5": " defines the quality of your life and what you will achieve", + "point5_color": "Life line", + "point6": "A short middle finger reveals a free spirit", + "point7": " represents your material achievement and career goals", + "point7_color": "Fate line", + "point8": "A long ring finger reveals that a person tends to take risks", + "point9": "A short little finger indicates the person's lack of self-confidence" + }, + "discover_more": "Discover More", + "why_love": "Why does everyone ?", + "why_love_color": "love AURA", + "reviews": { + "username1": "Rebecca Bauman", + "tagline1": "\"It’s changed my life!\"", + "text1": "I'm thankful for this app and Akho! She's an excellent palm reader and astrologer—clear, thorough, and reassuring. I eagerly look forward to more sessions with her!", + "username2": "Mika Ryan", + "tagline2": "\"After years of seeking, I’ve finally found a true love.\"", + "text2": "I was hesitant about whether it was really worth trying, but now I have no regrets and I'm enjoying my new relationships!", + "username3": "Amanda Holmes", + "tagline3": "\"I’ve found a job I really enjoy.\"", + "text3": "Thanks to Vladana, I've finally discovered a clue about what my life's purpose really is and what kind of job resonates with me better!" + }, + "success_story": "Become a AURA Success Story!", + "as_seen_in": " As Seen in", + "footer": { + "text1": "Questions? We’re here to help", + "text2": "Customer Support", + "text3": "Help Center" + } + }, + "/payment": { + "will_be_charged_trial_info": " for your -day trial", + "will_be_charged_email_reminder": "email you a reminder", + "will_be_charged": "You will be charged only . Then per week. Save every week. We’ll before your trial ends.", + "payment_information": { + "personalized_offer": "Personalized offer reserved", + "title": "Start your -day trial", + "total_today": "Total today", + "code_applied_bold": "AURA24", + "code_applied": "Code applied!" + }, + "guarantees": { + "no_commitment": "No commitment. Cancel anytime.", + "30_day_money_back": "30-Day Money-Back Guarantee" + }, + "get_personal_prediction": "Get personal prediction", + "total_due": "Total due today: ", + "app_number_one_color": "25 million people.", + "app_number_one": "The #1 Astrology app trusted by over " + } } } diff --git a/public/locales/v1/en/male_en.json b/public/locales/v1/en/male_en.json index 89c2bf2..6ff6bc4 100644 --- a/public/locales/v1/en/male_en.json +++ b/public/locales/v1/en/male_en.json @@ -620,6 +620,12 @@ "title": "PALMISTRY GUIDE", "discount": "% OFF", "price": " ( was )" + }, + "skip_offer": { + "title": "SKIP OFFER", + "discount": "% OFF", + "price": " ( was )", + "description": "You are missing out on both readings" } }, "description": "*You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment." @@ -671,5 +677,212 @@ }, "/trial-choice": { "button": "Choose an amount that you think is reasonable." + }, + "skip_trial": "Skip Trial", + "add_consultant": "Add Consultant", + "add_guides": "Add Guides", + "/skip-trial": { + "title": "Not planning on looking back?", + "price_per_week": " per week", + "billing_period": "Billing period", + "billed_amount": "Billed amount", + "billed_in_4_weeks": "Billed in 4 weeks", + "start_trial": { + "every_week": "Every week", + "start_trial": "Start trial" + }, + "skip_trial": { + "save": "save %", + "every_4_weeks": "Every 4 weeks", + "skip_trial": "Accept offer and skip trial" + } + }, + "/add-consultant": { + "caution": "Caution!", + "caution_text": "To prevent double charges please don`t close the page and don`t go back.", + "unlock_profound": "Unlock profound insights into your personality, relationships, career trajectory, and life's pivotal moments through astrology, empowering you to make informed decisions and achieve greater fulfillment.", + "choose_from": "Choose from 80+ experts astrologers." + }, + "palmistry-v1": { + "next": "Next", + "/find-your-happiness": { + "title": "Find your happiness with highly-personalized predictions.", + "point1": "rated by real users", + "point2": "93.4% Accuracy", + "point3": "20m users’ choice", + "point4": "4.8 satisfaction sco", + "text": "Understand your self and improve relationships with astrology" + }, + "/gender": { + "title": "What’s your gender?", + "description": "In Palmistry, everyone is a blend of masculine and feminine, so it helps to know yours." + }, + "/birthdate": { + "title": "What’s your date of birth?", + "text": "Your birth date reveals your core personality traits, needs and desires." + }, + "/palms-information": { + "title": "Your palms hold a wealth of information about your fate and personality." + }, + "/what-aspects": { + "title": "What aspects of your life do you wish to gain insight into through palmistry?", + "answer1": "Love & Relationships", + "answer2": "Health & Vitality", + "answer3": "Career & Destiny" + }, + "/relationship-status": { + "title": "So we can get to know you better, please tell us your relationship status", + "answer1": "Single", + "answer2": "In a relationship" + }, + "/element-resonates": { + "title": "Which element resonates with you most?", + "answer1": "Water", + "answer2": "Fire", + "answer3": "Air", + "answer4": "Earth" + }, + "/favorite-color": { + "title": "Which color do you like the most?", + "answer1": "Blue", + "answer2": "Green", + "answer3": "Orange", + "answer4": "Violet", + "answer5": "Red", + "answer6": "Yellow" + }, + "/head-or-heart": { + "title": "Do you make decisions with your head or your heart?", + "answer1": "Heart", + "answer2": "Head", + "answer3": "Both" + }, + "/relate-following": { + "title": "Do you relate to the following:", + "question1": "I find solace and comfort in spending time alone.", + "question2": "I value and enjoy my own company.", + "question3": "I prefer socializing in groups rather than spending time alone.", + "question4": "Loneliness is something I actively try to avoid.", + "question5": "I enjoy activities that I can do independently.", + "strongly_agree": "Strongly Agree", + "strongly_disagree": "Strongly Disagree" + }, + "/let-scan": { + "title": "Let`s scan your palms", + "text": "Follow the on-screen instructions, so we can analyze your palm lines and reveal your future, and the secrets of your destiny!" + }, + "biometric_data": "No biometric data collected. All recognition process performs on your device.", + "/scan-instruction": { + "title": "Take your palm picture as instructed", + "button": "Take a picture now" + }, + "/email": { + "title": "Enter your email to get your advanced Palmistry reading with AURA", + "not_share": "We don’t share any personal information." + }, + "went_wrong": "Something went wrong.", + "app_number_one": { + "text": "The app trusted by over 25 million people.", + "color": "#1 Astrology" + }, + "/trial-payment": { + "palm_is_ready": { + "title": "Your Palm Reading ", + "title_color": "Is Ready", + "description": "“I’ve just received your palm scan results. Let’s discuss!”", + "text1": " 6 years in palmistry readings and spiritual guidance.", + "text1_color": "Akho", + "text2": "Choose from 80+ palm readers and astrologers." + }, + "joined_today": { + "text1": "Unlimited chats with a palm reader", + "text2": " people joined today" + }, + "get_personal_prediction": "Get personal prediction", + "how_work": { + "title": "How does AURA work?", + "point1_title": "Send us your palm scan", + "point1_text": "We analyze your palm lines to get hints about your future", + "point2_title": "Your palm reading is generated", + "point2_text": "One of our professional palm readers puts together a report filled with hints about your future", + "point3_title": "Start your trial to receive your prediction", + "point3_text": "Once you’re a AURA member, we’ll send over your prediction report so you can begin living a better life.", + "point4_title": "Talk with a palm reading specialist anytime", + "point4_text": "Get ongoing support by discussing your readings, personal horoscopes, and compatibilities with our expert team." + }, + "money_back_guarantee": { + "title": "100% Money-back Guarantee", + "text": "If you don’t notice any progress after using the app for at least a week, we are ready to make a complete refund within 14 days." + }, + "begin_trial_now": "Begin Trial Now", + "what_included": { + "title": "What’s included?", + "point1": " palm readings", + "point1_bold": "Unlimited", + "point2": " with professional astrologers", + "point2_bold": "1:1 live chats", + "point3": " readings", + "point3_bold": "Daily compatibility", + "point4": "Cosmic relationship tips", + "point5": "Daily horoscopes" + }, + "palms_say_about": { + "title": "What do your palms say about you?", + "point1": " shows your attitude to love and the quality of love", + "point1_color": "Love line", + "point2": "A long thumb indicates good fortune", + "point3": " reflects your in telligence and mentality", + "point3_color": "Head line", + "point4": "A long index finger indicates a natural leader", + "point5": " defines the quality of your life and what you will achieve", + "point5_color": "Life line", + "point6": "A short middle finger reveals a free spirit", + "point7": " represents your material achievement and career goals", + "point7_color": "Fate line", + "point8": "A long ring finger reveals that a person tends to take risks", + "point9": "A short little finger indicates the person's lack of self-confidence" + }, + "discover_more": "Discover More", + "why_love": "Why does everyone ?", + "why_love_color": "love AURA", + "reviews": { + "username1": "Rebecca Bauman", + "tagline1": "\"It’s changed my life!\"", + "text1": "I'm thankful for this app and Akho! She's an excellent palm reader and astrologer—clear, thorough, and reassuring. I eagerly look forward to more sessions with her!", + "username2": "Mika Ryan", + "tagline2": "\"After years of seeking, I’ve finally found a true love.\"", + "text2": "I was hesitant about whether it was really worth trying, but now I have no regrets and I'm enjoying my new relationships!", + "username3": "Amanda Holmes", + "tagline3": "\"I’ve found a job I really enjoy.\"", + "text3": "Thanks to Vladana, I've finally discovered a clue about what my life's purpose really is and what kind of job resonates with me better!" + }, + "success_story": "Become a AURA Success Story!", + "as_seen_in": " As Seen in", + "footer": { + "text1": "Questions? We’re here to help", + "text2": "Customer Support", + "text3": "Help Center" + } + }, + "/payment": { + "will_be_charged_trial_info": " for your -day trial", + "will_be_charged_email_reminder": "email you a reminder", + "will_be_charged": "You will be charged only . Then per week. Save every week. We’ll before your trial ends.", + "payment_information": { + "personalized_offer": "Personalized offer reserved", + "title": "Start your -day trial", + "total_today": "Total today", + "code_applied_bold": "AURA24", + "code_applied": "Code applied!" + }, + "guarantees": { + "no_commitment": "No commitment. Cancel anytime.", + "30_day_money_back": "30-Day Money-Back Guarantee" + }, + "get_personal_prediction": "Get personal prediction", + "total_due": "Total due today: ", + "app_number_one_color": "25 million people.", + "app_number_one": "The #1 Astrology app trusted by over " + } } } diff --git a/public/paywall__astrologers-image.png b/public/paywall__astrologers-image.png new file mode 100644 index 0000000..921ccde Binary files /dev/null and b/public/paywall__astrologers-image.png differ diff --git a/public/paywall__spiritist-spiritualist.png b/public/paywall__spiritist-spiritualist.png new file mode 100644 index 0000000..32004d0 Binary files /dev/null and b/public/paywall__spiritist-spiritualist.png differ diff --git a/public/v1/palmistry/1_1.svg b/public/v1/palmistry/1_1.svg new file mode 100644 index 0000000..2f78341 --- /dev/null +++ b/public/v1/palmistry/1_1.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/v1/palmistry/blue.png b/public/v1/palmistry/blue.png new file mode 100644 index 0000000..fd00d4d Binary files /dev/null and b/public/v1/palmistry/blue.png differ diff --git a/public/v1/palmistry/calendar.svg b/public/v1/palmistry/calendar.svg new file mode 100644 index 0000000..6f0e6f1 --- /dev/null +++ b/public/v1/palmistry/calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/v1/palmistry/check-mark.svg b/public/v1/palmistry/check-mark.svg new file mode 100644 index 0000000..159fc6a --- /dev/null +++ b/public/v1/palmistry/check-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/v1/palmistry/circle-in-ring.svg b/public/v1/palmistry/circle-in-ring.svg new file mode 100644 index 0000000..98dd981 --- /dev/null +++ b/public/v1/palmistry/circle-in-ring.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/v1/palmistry/cosmic.svg b/public/v1/palmistry/cosmic.svg new file mode 100644 index 0000000..b1a0bd1 --- /dev/null +++ b/public/v1/palmistry/cosmic.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/v1/palmistry/daily.svg b/public/v1/palmistry/daily.svg new file mode 100644 index 0000000..620b4eb --- /dev/null +++ b/public/v1/palmistry/daily.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/v1/palmistry/darts.png b/public/v1/palmistry/darts.png new file mode 100644 index 0000000..eeea01a Binary files /dev/null and b/public/v1/palmistry/darts.png differ diff --git a/public/v1/palmistry/fate-line.svg b/public/v1/palmistry/fate-line.svg new file mode 100644 index 0000000..28e82ca --- /dev/null +++ b/public/v1/palmistry/fate-line.svg @@ -0,0 +1,3519 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/green.png b/public/v1/palmistry/green.png new file mode 100644 index 0000000..6a9b429 Binary files /dev/null and b/public/v1/palmistry/green.png differ diff --git a/public/v1/palmistry/hand-animation.png b/public/v1/palmistry/hand-animation.png new file mode 100644 index 0000000..4c6faaf Binary files /dev/null and b/public/v1/palmistry/hand-animation.png differ diff --git a/public/v1/palmistry/hand-little-finger.svg b/public/v1/palmistry/hand-little-finger.svg new file mode 100644 index 0000000..8557fb4 --- /dev/null +++ b/public/v1/palmistry/hand-little-finger.svg @@ -0,0 +1,3433 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/hand-with-eye.png b/public/v1/palmistry/hand-with-eye.png new file mode 100644 index 0000000..090ec49 Binary files /dev/null and b/public/v1/palmistry/hand-with-eye.png differ diff --git a/public/v1/palmistry/hand-with-eye.svg b/public/v1/palmistry/hand-with-eye.svg new file mode 100644 index 0000000..0de97e2 --- /dev/null +++ b/public/v1/palmistry/hand-with-eye.svg @@ -0,0 +1,254 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/hand-with-lines.png b/public/v1/palmistry/hand-with-lines.png new file mode 100644 index 0000000..1e277d9 Binary files /dev/null and b/public/v1/palmistry/hand-with-lines.png differ diff --git a/public/v1/palmistry/hand-with-lines.svg b/public/v1/palmistry/hand-with-lines.svg new file mode 100644 index 0000000..a9b3bb2 --- /dev/null +++ b/public/v1/palmistry/hand-with-lines.svg @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/hand.svg b/public/v1/palmistry/hand.svg new file mode 100644 index 0000000..0ea43c1 --- /dev/null +++ b/public/v1/palmistry/hand.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/v1/palmistry/head-line.svg b/public/v1/palmistry/head-line.svg new file mode 100644 index 0000000..e212414 --- /dev/null +++ b/public/v1/palmistry/head-line.svg @@ -0,0 +1,3331 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/headphones.svg b/public/v1/palmistry/headphones.svg new file mode 100644 index 0000000..4498e84 --- /dev/null +++ b/public/v1/palmistry/headphones.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/let-scan.png b/public/v1/palmistry/let-scan.png new file mode 100644 index 0000000..f44d331 Binary files /dev/null and b/public/v1/palmistry/let-scan.png differ diff --git a/public/v1/palmistry/life-line.svg b/public/v1/palmistry/life-line.svg new file mode 100644 index 0000000..25eb3ab --- /dev/null +++ b/public/v1/palmistry/life-line.svg @@ -0,0 +1,3331 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/love-line.svg b/public/v1/palmistry/love-line.svg new file mode 100644 index 0000000..beb9b18 --- /dev/null +++ b/public/v1/palmistry/love-line.svg @@ -0,0 +1,2365 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/money-back.svg b/public/v1/palmistry/money-back.svg new file mode 100644 index 0000000..33bce07 --- /dev/null +++ b/public/v1/palmistry/money-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/v1/palmistry/orange.png b/public/v1/palmistry/orange.png new file mode 100644 index 0000000..96002da Binary files /dev/null and b/public/v1/palmistry/orange.png differ diff --git a/public/v1/palmistry/partners.png b/public/v1/palmistry/partners.png new file mode 100644 index 0000000..c11d03f Binary files /dev/null and b/public/v1/palmistry/partners.png differ diff --git a/public/v1/palmistry/partners.svg b/public/v1/palmistry/partners.svg new file mode 100644 index 0000000..2e7b435 --- /dev/null +++ b/public/v1/palmistry/partners.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/v1/palmistry/question.svg b/public/v1/palmistry/question.svg new file mode 100644 index 0000000..7636e87 --- /dev/null +++ b/public/v1/palmistry/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/v1/palmistry/red.png b/public/v1/palmistry/red.png new file mode 100644 index 0000000..4a638c6 Binary files /dev/null and b/public/v1/palmistry/red.png differ diff --git a/public/v1/palmistry/reviews.png b/public/v1/palmistry/reviews.png new file mode 100644 index 0000000..7f0051b Binary files /dev/null and b/public/v1/palmistry/reviews.png differ diff --git a/public/v1/palmistry/reviews/amanda.png b/public/v1/palmistry/reviews/amanda.png new file mode 100644 index 0000000..32c1906 Binary files /dev/null and b/public/v1/palmistry/reviews/amanda.png differ diff --git a/public/v1/palmistry/reviews/mika.png b/public/v1/palmistry/reviews/mika.png new file mode 100644 index 0000000..d1d57e3 Binary files /dev/null and b/public/v1/palmistry/reviews/mika.png differ diff --git a/public/v1/palmistry/reviews/rebecca.png b/public/v1/palmistry/reviews/rebecca.png new file mode 100644 index 0000000..d083cee Binary files /dev/null and b/public/v1/palmistry/reviews/rebecca.png differ diff --git a/public/v1/palmistry/ring.svg b/public/v1/palmistry/ring.svg new file mode 100644 index 0000000..f8a89e2 --- /dev/null +++ b/public/v1/palmistry/ring.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/v1/palmistry/scan-instruction.png b/public/v1/palmistry/scan-instruction.png new file mode 100644 index 0000000..b0fd2ba Binary files /dev/null and b/public/v1/palmistry/scan-instruction.png differ diff --git a/public/v1/palmistry/star.png b/public/v1/palmistry/star.png new file mode 100644 index 0000000..2f2a04e Binary files /dev/null and b/public/v1/palmistry/star.png differ diff --git a/public/v1/palmistry/ticket.svg b/public/v1/palmistry/ticket.svg new file mode 100644 index 0000000..610efd1 --- /dev/null +++ b/public/v1/palmistry/ticket.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/v1/palmistry/trial-payment/avatar-1.png b/public/v1/palmistry/trial-payment/avatar-1.png new file mode 100644 index 0000000..fbf73b8 Binary files /dev/null and b/public/v1/palmistry/trial-payment/avatar-1.png differ diff --git a/public/v1/palmistry/trial-payment/avatar-2.png b/public/v1/palmistry/trial-payment/avatar-2.png new file mode 100644 index 0000000..84b1eb3 Binary files /dev/null and b/public/v1/palmistry/trial-payment/avatar-2.png differ diff --git a/public/v1/palmistry/trial-payment/avatar-3.png b/public/v1/palmistry/trial-payment/avatar-3.png new file mode 100644 index 0000000..760c450 Binary files /dev/null and b/public/v1/palmistry/trial-payment/avatar-3.png differ diff --git a/public/v1/palmistry/trial-payment/avatar-4.png b/public/v1/palmistry/trial-payment/avatar-4.png new file mode 100644 index 0000000..eac488a Binary files /dev/null and b/public/v1/palmistry/trial-payment/avatar-4.png differ diff --git a/public/v1/palmistry/trial-payment/girl.png b/public/v1/palmistry/trial-payment/girl.png new file mode 100644 index 0000000..95824cb Binary files /dev/null and b/public/v1/palmistry/trial-payment/girl.png differ diff --git a/public/v1/palmistry/trial-payment/infinite.svg b/public/v1/palmistry/trial-payment/infinite.svg new file mode 100644 index 0000000..481ddf7 --- /dev/null +++ b/public/v1/palmistry/trial-payment/infinite.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/v1/palmistry/trial-payment/people.svg b/public/v1/palmistry/trial-payment/people.svg new file mode 100644 index 0000000..2d33ea5 --- /dev/null +++ b/public/v1/palmistry/trial-payment/people.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/v1/palmistry/violet.png b/public/v1/palmistry/violet.png new file mode 100644 index 0000000..24497d8 Binary files /dev/null and b/public/v1/palmistry/violet.png differ diff --git a/public/v1/palmistry/yellow.png b/public/v1/palmistry/yellow.png new file mode 100644 index 0000000..1ee5298 Binary files /dev/null and b/public/v1/palmistry/yellow.png differ diff --git a/src/api/resources/Paywall.ts b/src/api/resources/Paywall.ts index 7975fc1..30b48b1 100644 --- a/src/api/resources/Paywall.ts +++ b/src/api/resources/Paywall.ts @@ -66,6 +66,6 @@ interface IPaywallProperties { export type ResponseGet = ResponseGetSuccess | ResponseGetError; export const createRequestGet = ({ token, placementKey }: PayloadGet): Request => { - const url = new URL(routes.server.getPaywallByPlacementKey(placementKey) + "?currency=EUR"); + const url = new URL(routes.server.getPaywallByPlacementKey(placementKey)); return new Request(url, { method: "GET", headers: getAuthHeaders(token) }); }; diff --git a/src/api/resources/Products.ts b/src/api/resources/Products.ts index a75100a..f41d0c3 100644 --- a/src/api/resources/Products.ts +++ b/src/api/resources/Products.ts @@ -7,7 +7,6 @@ interface Payload { export interface PayloadGet extends Payload { productKey: string; - email: string; } interface ResponseGetSuccess { @@ -23,7 +22,7 @@ interface ResponseGetError { export type ResponseGet = ResponseGetSuccess | ResponseGetError; -export const createRequest = ({ token, productKey, email }: PayloadGet): Request => { - const url = new URL(routes.server.dApiCheckProductPurchased(productKey, email)); +export const createRequest = ({ token, productKey }: PayloadGet): Request => { + const url = new URL(routes.server.dApiCheckProductPurchased(productKey)); return new Request(url, { method: "GET", headers: getAuthHeaders(token) }); }; diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index 4608bc8..6eaca01 100755 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -25,6 +25,7 @@ import routes, { hasNoHeader, hasNavbarFooter, hasFullDataModal, + palmistryV1Prefix, } from "@/routes"; import BirthdayPage from "../BirthdayPage"; import BirthtimePage from "../BirthtimePage"; @@ -123,6 +124,11 @@ import SinglePaymentPage from "../pages/SinglePaymentPage"; import ABDesignV1Routes from "@/routerComponents/ABDesign/v1"; import MikeV1Routes from "@/routerComponents/Mike/v1"; import metricService from "@/services/metric/metricService"; +import PalmistryV1Routes from "@/routerComponents/Palmistry/v1"; +import AdditionalPurchasesPalmistry from "../palmistry/AdditionalPurchases"; +import AddConsultant from "../palmistry/AdditionalPurchases/pages/AddConsultant"; +import AddGuides from "../palmistry/AdditionalPurchases/pages/AddGuides"; +import SkipTrial from "../palmistry/AdditionalPurchases/pages/SkipTrial"; const isProduction = import.meta.env.MODE === "production"; @@ -286,6 +292,7 @@ function App(): JSX.Element { }> } /> + } /> } /> }> } /> @@ -742,6 +749,19 @@ function App(): JSX.Element { {/* Additional Purchases End */} + {/* Additional Purchases Palmistry */} + }> + }> + } /> + } + /> + } /> + + + {/* Additional Purchases Palmistry End */} + } @@ -1103,7 +1123,6 @@ function ShortPathOutlet(props: IShortPathOutletProps): JSX.Element { }; try { const purchased = await api.checkProductPurchased({ - email: user?.email || "", productKey, token, }); diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx index 2b615ea..835dfd8 100644 --- a/src/components/HomePage/index.tsx +++ b/src/components/HomePage/index.tsx @@ -27,10 +27,7 @@ import TextWithFinger from "../TextWithFinger"; // IPredictionMoon, // } from "../PredictionMoonsSlider"; import { predictionMoonsPeriods } from "@/data"; -import FullScreenModal from "../FullScreenModal"; import { useDynamicSize } from "@/hooks/useDynamicSize"; -import PDFViewer from "../PDFViewer"; -import BackButton from "../pages/ABDesign/v1/ui/BackButton"; // import WallpapersZodiacSign from "../WallpapersZodiacSign"; // import ThermalSlider from "../ThermalSlider"; // import MoonPhaseTracker from "../MoonPhaseTracker"; @@ -76,7 +73,7 @@ function HomePage(): JSX.Element { !onboardingConfigHome?.isShown ); - const [isShowPDF, setIsShowPDF] = useState(false); + // const [isShowPDF, setIsShowPDF] = useState(false); useEffect(() => { dispatch( @@ -89,7 +86,9 @@ function HomePage(): JSX.Element { }, [dispatch]); const handleCompatibilityPDF = () => { - setIsShowPDF(true); + if (!PDFCompatibility?.url?.length) return; + window.location.href = PDFCompatibility?.url; + // setIsShowPDF(true); }; const handleCompatibility = () => { @@ -191,13 +190,13 @@ function HomePage(): JSX.Element { saveFile(asset.url.replace("http://", "https://"), buildFilename("1")); }; - const downloadPDF = () => { - if (!PDFCompatibility?.url) return; - saveFile( - PDFCompatibility?.url.replace("http://", "https://"), - buildFilename("pdf-compatibility", "pdf") - ); - }; + // const downloadPDF = () => { + // if (!PDFCompatibility?.url) return; + // saveFile( + // PDFCompatibility?.url.replace("http://", "https://"), + // buildFilename("pdf-compatibility", "pdf") + // ); + // }; // const handleBestiesHoroscope = (item: Horoscope) => { // const { name, birthDate } = item; @@ -230,7 +229,10 @@ function HomePage(): JSX.Element { // navigate(`${routes.client.nameHoroscopeResult()}?period=${item.period}`); // }; - const { width, elementRef: pageRef } = useDynamicSize({}); + const { + // width, + elementRef: pageRef, + } = useDynamicSize({}); return (
- - + */} {/*
+ 2024, Wit Apps LLC,
+ 123, Rimer Dr, Moraga, California, 94556, US +

+ ); +} + +export default Address; diff --git a/src/components/PalmistryV1/components/Address/styles.module.scss b/src/components/PalmistryV1/components/Address/styles.module.scss new file mode 100644 index 0000000..df6890f --- /dev/null +++ b/src/components/PalmistryV1/components/Address/styles.module.scss @@ -0,0 +1,7 @@ +.address { + font-size: 16px; + color: #2c2c2c; + text-align: center; + line-height: 125%; + margin-top: 12px; +} diff --git a/src/components/PalmistryV1/components/Answer/index.tsx b/src/components/PalmistryV1/components/Answer/index.tsx new file mode 100644 index 0000000..2829ab5 --- /dev/null +++ b/src/components/PalmistryV1/components/Answer/index.tsx @@ -0,0 +1,36 @@ +import { ButtonHTMLAttributes } from "react"; +import styles from "./styles.module.scss"; + +interface IAnswer { + id: string; + title: string; +} + +type TAnswerProps = { + answer: IAnswer; + isSelected?: boolean; + selectedClassName?: string; +} & ButtonHTMLAttributes; + +function Answer({ + answer, + isSelected, + className = "", + selectedClassName = styles.selected, + ...props +}: TAnswerProps) { + return ( + + ); +} + +export default Answer; diff --git a/src/components/PalmistryV1/components/Answer/styles.module.scss b/src/components/PalmistryV1/components/Answer/styles.module.scss new file mode 100644 index 0000000..820fbb0 --- /dev/null +++ b/src/components/PalmistryV1/components/Answer/styles.module.scss @@ -0,0 +1,25 @@ +.container { + width: 100%; + height: 71px; + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + font-size: 27px; + font-weight: normal; + background-color: #f1f1f1; + box-shadow: 2px 5px 3px #00000020; + border: none; + color: #000; + transition: background 0.4s ease-in-out, transform 0.4s ease-in-out; + cursor: pointer; + + &.selected { + background: linear-gradient(to right, #057dd4 23%, #224e90 74%, #0c6bc3 94%), + linear-gradient(-45deg, #3a617120 9%, #21212120 72%, #21895120 96%); + background-blend-mode: color; + color: #fff; + // transform: scale(1.02); + } +} diff --git a/src/components/PalmistryV1/components/AppNumberOne/index.tsx b/src/components/PalmistryV1/components/AppNumberOne/index.tsx new file mode 100644 index 0000000..3e28aaa --- /dev/null +++ b/src/components/PalmistryV1/components/AppNumberOne/index.tsx @@ -0,0 +1,20 @@ +import { palmistryV1Prefix } from "@/routes"; +import styles from "./styles.module.scss"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function AppNumberOne() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + return ( +
+ Reviews +

+ {translate("app_number_one.text", { + color: {translate("app_number_one.color")}, + })} +

+
+ ); +} + +export default AppNumberOne; diff --git a/src/components/PalmistryV1/components/AppNumberOne/styles.module.scss b/src/components/PalmistryV1/components/AppNumberOne/styles.module.scss new file mode 100644 index 0000000..4ae1e47 --- /dev/null +++ b/src/components/PalmistryV1/components/AppNumberOne/styles.module.scss @@ -0,0 +1,18 @@ +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.text { + font-size: 14px; + text-align: center; + line-height: 125%; + max-width: 305px; + + & > span { + color: #275ca7; + font-weight: 500; + } +} diff --git a/src/components/PalmistryV1/components/Button/index.tsx b/src/components/PalmistryV1/components/Button/index.tsx new file mode 100644 index 0000000..d16d940 --- /dev/null +++ b/src/components/PalmistryV1/components/Button/index.tsx @@ -0,0 +1,12 @@ +import MainButton, { ButtonProps } from "@/components/MainButton"; +import styles from "./styles.module.scss"; + +function Button(props: ButtonProps) { + return ( + + {props.children} + + ); +} + +export default Button; diff --git a/src/components/PalmistryV1/components/Button/styles.module.scss b/src/components/PalmistryV1/components/Button/styles.module.scss new file mode 100644 index 0000000..1972f83 --- /dev/null +++ b/src/components/PalmistryV1/components/Button/styles.module.scss @@ -0,0 +1,10 @@ +.button { + min-height: 71px; + border-radius: 8px; + font-size: 28px; + font-weight: normal; + background: linear-gradient(to right, #057dd4 23%, #224e90 74%, #0c6bc3 94%), + linear-gradient(-45deg, #3a617120 9%, #21212120 72%, #21895120 96%); + background-blend-mode: color; + box-shadow: 2px 5px 2.5px #00000025; +} diff --git a/src/components/PalmistryV1/components/EmailSubstrate/index.tsx b/src/components/PalmistryV1/components/EmailSubstrate/index.tsx new file mode 100644 index 0000000..af2ad80 --- /dev/null +++ b/src/components/PalmistryV1/components/EmailSubstrate/index.tsx @@ -0,0 +1,20 @@ +import { HTMLAttributes } from "react"; +import styles from "./styles.module.scss"; + +interface IEmailSubstrateProps { + email: string; +} + +function EmailSubstrate({ + email, + ...props +}: IEmailSubstrateProps & HTMLAttributes) { + return ( +
+

{email}

+
{email[0]?.toUpperCase()}
+
+ ); +} + +export default EmailSubstrate; diff --git a/src/components/PalmistryV1/components/EmailSubstrate/styles.module.scss b/src/components/PalmistryV1/components/EmailSubstrate/styles.module.scss new file mode 100644 index 0000000..19fca5b --- /dev/null +++ b/src/components/PalmistryV1/components/EmailSubstrate/styles.module.scss @@ -0,0 +1,35 @@ +.container { + width: 100%; + height: 46px; + padding: 13px; + display: grid; + grid-template-columns: 1fr 36px; + align-content: center; + justify-content: flex-end; + align-items: center; + gap: 4px; + background-color: #9ab6ca; + border-radius: 8px 0 0 8px; +} + +.email { + font-size: 16px; + line-height: 125%; + color: #fff; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + text-align: right; +} + +.icon { + width: 36px; + height: 36px; + background-color: #4c596c83; + font-size: 24px; + color: #fff; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/PalmistryV1/components/Footer/index.tsx b/src/components/PalmistryV1/components/Footer/index.tsx new file mode 100644 index 0000000..6518b96 --- /dev/null +++ b/src/components/PalmistryV1/components/Footer/index.tsx @@ -0,0 +1,29 @@ +import { palmistryV1Prefix } from "@/routes"; +import styles from "./styles.module.scss"; +import Address from "../Address"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function Footer() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + + return ( + + ); +} + +export default Footer; diff --git a/src/components/PalmistryV1/components/Footer/styles.module.scss b/src/components/PalmistryV1/components/Footer/styles.module.scss new file mode 100644 index 0000000..0061d2d --- /dev/null +++ b/src/components/PalmistryV1/components/Footer/styles.module.scss @@ -0,0 +1,41 @@ +.footer { + width: 100%; + margin-top: 30px; + display: flex; + flex-direction: column; + align-items: center; + + & > hr { + width: 100%; + height: 2px; + background-color: #224e90; + border: none; + margin-bottom: 40px; + } +} + +.text { + font-size: 18px; + font-weight: 500; +} + +.links { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 20px; + margin-top: 26px; + + & > .link { + display: flex; + flex-direction: row; + align-items: end; + gap: 5px; + font-size: 18px; + font-weight: 500; + color: #224e90; + text-decoration: none; + } +} diff --git a/src/components/PalmistryV1/components/Guarantees/index.tsx b/src/components/PalmistryV1/components/Guarantees/index.tsx new file mode 100644 index 0000000..f32ff62 --- /dev/null +++ b/src/components/PalmistryV1/components/Guarantees/index.tsx @@ -0,0 +1,65 @@ +import { ELocalesPlacement } from "@/locales"; +import styles from "./styles.module.scss"; +import { useTranslations } from "@/hooks/translations"; + +function Guarantees() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + return ( +
+
+ + + + + + + + + + + + + + + + + {translate("/payment.guarantees.no_commitment")} +
+ +
+ + + + + + {translate("/payment.guarantees.30_day_money_back")} +
+
+ ); +} + +export default Guarantees; diff --git a/src/components/PalmistryV1/components/Guarantees/styles.module.scss b/src/components/PalmistryV1/components/Guarantees/styles.module.scss new file mode 100644 index 0000000..02c4fb8 --- /dev/null +++ b/src/components/PalmistryV1/components/Guarantees/styles.module.scss @@ -0,0 +1,29 @@ +.guarantees { + width: 100%; + display: flex; + justify-content: space-between; + gap: 30px; + margin-top: 30px; +} + +.guarantee { + width: 100%; + display: flex; + justify-content: space-between; + gap: 8px; + max-width: 155px; + align-items: center; + & > svg { + min-width: 24px; + min-height: 24px; + max-width: 24px; + max-height: 24px; + } + + & > span { + color: #4b536a; + font-weight: 600; + font-size: 12px; + line-height: 18px; + } +} diff --git a/src/components/PalmistryV1/components/HowWork/index.tsx b/src/components/PalmistryV1/components/HowWork/index.tsx new file mode 100644 index 0000000..1038262 --- /dev/null +++ b/src/components/PalmistryV1/components/HowWork/index.tsx @@ -0,0 +1,78 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import { palmistryV1Prefix } from "@/routes"; +import { useMemo, useRef } from "react"; +import MoneyBackGuarantee from "../MoneyBackGuarantee"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +interface IPoint { + icon: string; + title: string; + text: string; +} + +function HowWork() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const textContainersRef = useRef([] as HTMLDivElement[]); + + const points: IPoint[] = useMemo( + () => [ + { + icon: `${palmistryV1Prefix}/check-mark.svg`, + title: translate("/trial-payment.how_work.point1_title"), + text: translate("/trial-payment.how_work.point1_text"), + }, + { + icon: `${palmistryV1Prefix}/check-mark.svg`, + title: translate("/trial-payment.how_work.point2_title"), + text: translate("/trial-payment.how_work.point2_text"), + }, + { + icon: `${palmistryV1Prefix}/circle-in-ring.svg`, + title: translate("/trial-payment.how_work.point3_title"), + text: translate("/trial-payment.how_work.point3_text"), + }, + { + icon: `${palmistryV1Prefix}/ring.svg`, + title: translate("/trial-payment.how_work.point4_title"), + text: translate("/trial-payment.how_work.point4_text"), + }, + ], + [translate] + ); + + return ( +
+ {points.map((point, index) => ( +
+
+ Check mark +
+
+
+ (textContainersRef.current[index] = el as HTMLDivElement) + } + > + + {point.title} + +

{point.text}

+
+
+ ))} + +
+ ); +} + +export default HowWork; diff --git a/src/components/PalmistryV1/components/HowWork/styles.module.scss b/src/components/PalmistryV1/components/HowWork/styles.module.scss new file mode 100644 index 0000000..f4ddc87 --- /dev/null +++ b/src/components/PalmistryV1/components/HowWork/styles.module.scss @@ -0,0 +1,52 @@ +.container { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + background: linear-gradient(to bottom, #4b88ff31, #ffffff30); + border-radius: 30px; + padding: 24px 28px 40px; +} + +.block { + display: flex; + flex-direction: row; + gap: 6px; + & > .left-side { + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; + + & > .vertical-line { + width: 3px; + height: 60px; + background-color: #057dd4; + border-radius: 3px; + } + } + + & > .text-container { + display: flex; + flex-direction: column; + gap: 5px; + height: fit-content; + & > .title { + font-size: 24px; + line-height: 100%; + color: #057dd4; + text-align: left; + margin: 0; + font-weight: 500; + } + & > .text { + font-size: 20px; + line-height: 125%; + color: #2f2e37; + text-align: left; + margin: 0; + } + } +} diff --git a/src/components/PalmistryV1/components/JoinedToday/index.tsx b/src/components/PalmistryV1/components/JoinedToday/index.tsx new file mode 100644 index 0000000..24228a0 --- /dev/null +++ b/src/components/PalmistryV1/components/JoinedToday/index.tsx @@ -0,0 +1,41 @@ +import styles from "./styles.module.scss"; +import { useEffect, useState } from "react"; +import { getRandomArbitrary } from "@/services/random-value"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import Infinite from "../../images/SVG/Infinite"; +import People from "../../images/SVG/People"; + +function JoinedToday() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const [countUsers, setCountUsers] = useState(752); + + useEffect(() => { + const randomDelay = getRandomArbitrary(3000, 5000); + const countUsersTimeOut = setTimeout(() => { + setCountUsers((prevState) => prevState + 1); + }, randomDelay); + return () => clearTimeout(countUsersTimeOut); + }, [countUsers]); + + return ( +
+
+ +

+ {translate("/trial-payment.joined_today.text1")} +

+
+
+ +

+ {translate("/trial-payment.joined_today.text2", { + count: countUsers, + })} +

+
+
+ ); +} + +export default JoinedToday; diff --git a/src/components/PalmistryV1/components/JoinedToday/styles.module.scss b/src/components/PalmistryV1/components/JoinedToday/styles.module.scss new file mode 100644 index 0000000..f646c84 --- /dev/null +++ b/src/components/PalmistryV1/components/JoinedToday/styles.module.scss @@ -0,0 +1,19 @@ +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 5px; + background-color: #c8dbff30; + border-radius: 30px; + padding: 19px 12px; + margin-top: 12px; +} + +.row { + width: 100%; + display: grid; + grid-template-columns: 41px 1fr; + gap: 10px; +} diff --git a/src/components/PalmistryV1/components/MoneyBackGuarantee/index.tsx b/src/components/PalmistryV1/components/MoneyBackGuarantee/index.tsx new file mode 100644 index 0000000..fcb3bda --- /dev/null +++ b/src/components/PalmistryV1/components/MoneyBackGuarantee/index.tsx @@ -0,0 +1,22 @@ +import { palmistryV1Prefix } from "@/routes"; +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function MoneyBackGuarantee() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + return ( +
+ Money back + + {translate("/trial-payment.money_back_guarantee.title")} + +

+ {translate("/trial-payment.money_back_guarantee.text")} +

+
+ ); +} + +export default MoneyBackGuarantee; diff --git a/src/components/PalmistryV1/components/MoneyBackGuarantee/styles.module.scss b/src/components/PalmistryV1/components/MoneyBackGuarantee/styles.module.scss new file mode 100644 index 0000000..199ce3c --- /dev/null +++ b/src/components/PalmistryV1/components/MoneyBackGuarantee/styles.module.scss @@ -0,0 +1,20 @@ +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; +} + +.title { + font-size: 20px; + font-weight: 600; + line-height: 125%; + color: #224e90; + margin: 0; +} + +.text { + font-size: 18px; + max-width: 288px; +} diff --git a/src/components/PalmistryV1/components/PalmIsReady/index.tsx b/src/components/PalmistryV1/components/PalmIsReady/index.tsx new file mode 100644 index 0000000..d744f48 --- /dev/null +++ b/src/components/PalmistryV1/components/PalmIsReady/index.tsx @@ -0,0 +1,65 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import { palmistryV1Prefix } from "@/routes"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function PalmIsReady() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + return ( +
+ + {translate("/trial-payment.palm_is_ready.title", { + color: ( + <span>{translate("/trial-payment.palm_is_ready.title_color")}</span> + ), + })} + +
+ Smile girl +

+ {translate("/trial-payment.palm_is_ready.description")} +

+

+ {translate("/trial-payment.palm_is_ready.text1", { + color: ( + + {translate("/trial-payment.palm_is_ready.text1_color")} + + ), + })} +

+

+ {translate("/trial-payment.palm_is_ready.text2")} +

+
+ Avatar + Avatar + Avatar + Avatar +
+
+
+ ); +} + +export default PalmIsReady; diff --git a/src/components/PalmistryV1/components/PalmIsReady/styles.module.scss b/src/components/PalmistryV1/components/PalmIsReady/styles.module.scss new file mode 100644 index 0000000..b258da8 --- /dev/null +++ b/src/components/PalmistryV1/components/PalmIsReady/styles.module.scss @@ -0,0 +1,65 @@ +.container { + width: 100%; + height: fit-content; + background: linear-gradient(to bottom, #c8dbff 0%, #ffffff 100%); + border-radius: 30px; + padding: 35px 0 0 15px; + margin-top: 16px; + overflow: hidden; +} + +.title { + margin: 0; + font-size: 32px; + line-height: 125%; + text-align: left; + + & > span { + color: #275ca7; + } +} + +.description { + font-size: 22px; + line-height: 125%; + margin-top: 26px; + font-weight: 500; +} + +.text { + font-size: 16px; + line-height: 125%; + margin-top: 12px; + & > span { + color: #275ca7; + font-size: 18px; + font-weight: 500; + } +} + +.choose-text { + font-size: 16px; + line-height: 125%; + margin-top: 18px; + font-weight: 500; +} + +.avatars-container { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin: 12px 0 0 15px; + + & > img { + margin-right: -18px; + width: 49px; + height: 49px; + } +} + +.girl-image { + float: right; + margin-top: 33px; + margin-right: -10px; + width: 191px; +} diff --git a/src/components/PalmistryV1/components/PalmsSayAbout/PointRing.tsx b/src/components/PalmistryV1/components/PalmsSayAbout/PointRing.tsx new file mode 100644 index 0000000..53ce3f9 --- /dev/null +++ b/src/components/PalmistryV1/components/PalmsSayAbout/PointRing.tsx @@ -0,0 +1,46 @@ +import { getRandomArbitrary } from "@/services/random-value"; + +interface IPointRingProps { + gradientColor?: string[]; +} + +function PointRing({ + gradientColor = ["#C68829", "#95661F"], +}: IPointRingProps) { + const id = getRandomArbitrary(0, 10000); + + return ( + + + + + {gradientColor.map((color, index) => ( + + ))} + + + + ); +} + +export default PointRing; diff --git a/src/components/PalmistryV1/components/PalmsSayAbout/index.tsx b/src/components/PalmistryV1/components/PalmsSayAbout/index.tsx new file mode 100644 index 0000000..0ac0282 --- /dev/null +++ b/src/components/PalmistryV1/components/PalmsSayAbout/index.tsx @@ -0,0 +1,140 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import { palmistryV1Prefix } from "@/routes"; +import PointRing from "./PointRing"; +import { ELocalesPlacement } from "@/locales"; +import { useTranslations } from "@/hooks/translations"; + +function PalmsSayAbout() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + + return ( +
+ + {translate("/trial-payment.palms_say_about.title")} + +
+
+ Hand with love line +
+
+ +

+ {translate("/trial-payment.palms_say_about.point1", { + color: ( + + {translate("/trial-payment.palms_say_about.point1_color")} + + ), + })} +

+
+
+ +

+ {translate("/trial-payment.palms_say_about.point2")} +

+
+
+
+
+ Hand with head line +
+
+ +

+ {translate("/trial-payment.palms_say_about.point3", { + color: ( + + {translate("/trial-payment.palms_say_about.point3_color")} + + ), + })} +

+
+
+ +

+ {translate("/trial-payment.palms_say_about.point4")} +

+
+
+
+
+ Hand with life line +
+
+ +

+ {translate("/trial-payment.palms_say_about.point5", { + color: ( + + {translate("/trial-payment.palms_say_about.point5_color")} + + ), + })} +

+
+
+ +

+ {translate("/trial-payment.palms_say_about.point6")} +

+
+
+
+
+ Hand with fate line +
+
+ +

+ {translate("/trial-payment.palms_say_about.point7", { + color: ( + + {translate("/trial-payment.palms_say_about.point7_color")} + + ), + })} +

+
+
+ +

+ {translate("/trial-payment.palms_say_about.point8")} +

+
+
+
+
+ Hand with little finger +
+
+ +

+ {translate("/trial-payment.palms_say_about.point9")} +

+
+
+
+
+
+ ); +} + +export default PalmsSayAbout; diff --git a/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss b/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss new file mode 100644 index 0000000..17e2ffa --- /dev/null +++ b/src/components/PalmistryV1/components/PalmsSayAbout/styles.module.scss @@ -0,0 +1,54 @@ +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 30px; + background: linear-gradient(to bottom, #5891ff31, #ffffff31); + padding: 15px 6px 27px; + margin-top: 40px; +} + +.title { + font-size: 28px; + font-weight: 600; + max-width: 274px; +} + +.row { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 12px; + + &:nth-child(even) { + flex-direction: row-reverse; + } +} + +.points { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; +} + +.point { + display: grid; + grid-template-columns: 16px 1fr; + gap: 2px; + + & > .text { + font-size: 16px; + line-height: 125%; + color: #000; + + & > span { + color: #cc8551; + font-weight: 600; + font-size: 18px; + } + } +} diff --git a/src/components/PalmistryV1/components/PaymentInformation/index.tsx b/src/components/PalmistryV1/components/PaymentInformation/index.tsx new file mode 100644 index 0000000..6ff0942 --- /dev/null +++ b/src/components/PalmistryV1/components/PaymentInformation/index.tsx @@ -0,0 +1,48 @@ +import Title from "@/components/Title"; +import Timer from "../Timer"; +import styles from "./styles.module.scss"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; +import { getFormattedPrice } from "@/utils/price.utils"; +import { addCurrency, ELocalesPlacement } from "@/locales"; +import { palmistryV1Prefix } from "@/routes"; +import { useTranslations } from "@/hooks/translations"; + +function PaymentInformation() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const activeProductFromStore = useSelector(selectors.selectActiveProduct); + const trialPrice = activeProductFromStore?.trialPrice || 0; + const currency = useSelector(selectors.selectCurrency); + + return ( +
+
+

{translate("/payment.payment_information.personalized_offer")}

+ +
+ + {translate("/payment.payment_information.title", { + trialDuration: activeProductFromStore?.trialDuration, + })} + +
+
+
+

{translate("/payment.payment_information.total_today")}

+ + {addCurrency(getFormattedPrice(trialPrice), currency)} + +
+
+
+
+ Ticket + {translate("/payment.payment_information.code_applied", { + bold: {translate("/payment.payment_information.code_applied_bold")}, + })} +
+
+ ); +} + +export default PaymentInformation; diff --git a/src/components/PalmistryV1/components/PaymentInformation/styles.module.scss b/src/components/PalmistryV1/components/PaymentInformation/styles.module.scss new file mode 100644 index 0000000..d8d5bc0 --- /dev/null +++ b/src/components/PalmistryV1/components/PaymentInformation/styles.module.scss @@ -0,0 +1,78 @@ +.container { + width: calc(100% + 34px); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + border-radius: 8px; + background: linear-gradient(to bottom, #c8dbff 0%, #ffffff 100%); + padding: 13px 40px 10px 15px; + margin-top: 16px; +} + +.offer-reserved { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; + font-size: 15px; + color: #2c2c2c; +} + +.title { + font-style: 20px; + font-weight: 600; + line-height: 125%; + color: #000; + margin: 0; + text-align: left; + width: 100%; +} + +hr { + width: calc(100% + 39px); + height: 1px; + background-color: #224e9026; + border: none; + margin: 0; + margin-left: -7px; +} + +.total-container { + width: 100%; +} + +.total-today { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 12px; + font-size: 16px; + padding: 0; + + & > strong { + font-size: 24px; + font-weight: 800; + line-height: 125%; + color: #224e90; + margin: 0; + } +} + +.code-applied { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + font-size: 14px; + color: #1b811f; + + & > b { + font-weight: 500; + } +} diff --git a/src/components/PalmistryV1/components/PaymentModal/index.tsx b/src/components/PalmistryV1/components/PaymentModal/index.tsx new file mode 100644 index 0000000..c934158 --- /dev/null +++ b/src/components/PalmistryV1/components/PaymentModal/index.tsx @@ -0,0 +1,71 @@ +import { useSearchParams } from "react-router-dom"; +import styles from "./styles.module.scss"; +import { HTMLAttributes, useState } from "react"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; +import PaymentModalNew from "@/components/PaymentModalNew"; +import { EPlacementKeys } from "@/api/resources/Paywall"; +import routes from "@/routes"; + +function PaymentModal(props: HTMLAttributes) { + const activeProductFromStore = useSelector(selectors.selectActiveProduct); + + const [searchParams] = useSearchParams(); + const subscriptionStatus = + searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead"; + const [height, setHeight] = useState( + subscriptionStatus === "subscribed" ? 246 : 146 + ); + + const returnUrl = window.location.origin + routes.client.palmistryV1Payment(); + + return ( + <> + {activeProductFromStore && ( +
+
+ {subscriptionStatus !== "subscribed" && ( + + )} + + {subscriptionStatus === "subscribed" && ( +
+ + + + +
Payment success
+
+ )} +
+
+ )} + + ); +} + +export default PaymentModal; diff --git a/src/components/PalmistryV1/components/PaymentModal/styles.module.scss b/src/components/PalmistryV1/components/PaymentModal/styles.module.scss new file mode 100644 index 0000000..5b7e725 --- /dev/null +++ b/src/components/PalmistryV1/components/PaymentModal/styles.module.scss @@ -0,0 +1,61 @@ +.container { + height: 100%; +} + +.widget { + position: fixed; + background: #fff; + bottom: 0; + box-shadow: 0 -2px 16px rgba(18, 22, 32, 0.1); + width: 100%; + padding: 12px 20px; + text-align: center; + text-align: -webkit-center; + transition: 0.5s height; + max-width: 560px; + margin-left: -66px; +} + +.widget_success { + height: 400px; +} + +.success { + width: 100%; + height: 100%; + background: #fff; + z-index: 99; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 30px; + padding: 40px; + + & > .icon { + width: 100px; + height: 100px; + max-width: 50%; + flex-shrink: 0; + } + + & > .text { + font-size: 24px; + line-height: 32px; + text-align: center; + color: #121620; + } +} + +@media screen and (max-width: 560px) { + .widget { + width: 100%; + padding: 12px 20px; + text-align: center; + text-align: -webkit-center; + transition: height 1s linear; + max-width: 560px; + margin-left: 0; + left: 0; + } +} diff --git a/src/components/PalmistryV1/components/Review/index.tsx b/src/components/PalmistryV1/components/Review/index.tsx new file mode 100644 index 0000000..ffce570 --- /dev/null +++ b/src/components/PalmistryV1/components/Review/index.tsx @@ -0,0 +1,36 @@ +import { palmistryV1Prefix } from "@/routes"; +import styles from "./styles.module.scss"; + +export interface IReviewProps { + username: string; + tagline: string; + stars?: number; + avatar: string; + text: string; +} + +function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) { + return ( +
+
+ Avatar +
+

{username}

+
+ {Array.from({ length: stars }).map((_, index) => ( + star + ))} +
+
+
+

{tagline}

+

{text}

+
+ ); +} + +export default Review; diff --git a/src/components/PalmistryV1/components/Review/styles.module.scss b/src/components/PalmistryV1/components/Review/styles.module.scss new file mode 100644 index 0000000..8de8b34 --- /dev/null +++ b/src/components/PalmistryV1/components/Review/styles.module.scss @@ -0,0 +1,38 @@ +.container { + width: 100%; + border-radius: 30px; + background: linear-gradient(to bottom, #4b88ff31 0%, #ffffff30 100%); + padding: 18px 12px 12px; +} + +.header { + margin-left: 8px; + display: flex; + flex-direction: row; + align-items: center; + gap: 6px; + + & > .info { + display: flex; + flex-direction: column; + align-items: start; + gap: 2px; + + & > .stars { + display: flex; + flex-direction: row; + align-items: center; + gap: 1px; + } + } +} + +.tagline { + color: #224e90; + line-height: 125%; +} + +.text { + margin-top: 16px; + line-height: 125%; +} diff --git a/src/components/PalmistryV1/components/Reviews/index.tsx b/src/components/PalmistryV1/components/Reviews/index.tsx new file mode 100644 index 0000000..6564fe7 --- /dev/null +++ b/src/components/PalmistryV1/components/Reviews/index.tsx @@ -0,0 +1,43 @@ +import { palmistryV1Prefix } from "@/routes"; +import Review, { IReviewProps } from "../Review"; +import styles from "./styles.module.scss"; +import { useMemo } from "react"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function Reviews() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const reviews: IReviewProps[] = useMemo( + () => [ + { + avatar: `${palmistryV1Prefix}/reviews/rebecca.png`, + username: translate("/trial-payment.reviews.username1"), + tagline: translate("/trial-payment.reviews.tagline1"), + text: translate("/trial-payment.reviews.text1"), + }, + { + avatar: `${palmistryV1Prefix}/reviews/mika.png`, + username: translate("/trial-payment.reviews.username2"), + tagline: translate("/trial-payment.reviews.tagline2"), + text: translate("/trial-payment.reviews.text2"), + }, + { + avatar: `${palmistryV1Prefix}/reviews/amanda.png`, + username: translate("/trial-payment.reviews.username3"), + tagline: translate("/trial-payment.reviews.tagline3"), + text: translate("/trial-payment.reviews.text3"), + }, + ], + [translate] + ); + + return ( +
+ {reviews.map((review, index) => ( + + ))} +
+ ); +} + +export default Reviews; diff --git a/src/components/PalmistryV1/components/Reviews/styles.module.scss b/src/components/PalmistryV1/components/Reviews/styles.module.scss new file mode 100644 index 0000000..5574b33 --- /dev/null +++ b/src/components/PalmistryV1/components/Reviews/styles.module.scss @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} diff --git a/src/components/PalmistryV1/components/Stars/index.tsx b/src/components/PalmistryV1/components/Stars/index.tsx new file mode 100644 index 0000000..3e40d10 --- /dev/null +++ b/src/components/PalmistryV1/components/Stars/index.tsx @@ -0,0 +1,18 @@ +import StarSVG from "../../images/SVG/Star"; +import styles from "./styles.module.scss"; + +interface IStarsProps { + stars?: number; +} + +function Stars({ stars = 5 }: IStarsProps) { + return ( +
+ {Array.from({ length: stars }).map((_, index) => ( + + ))} +
+ ); +} + +export default Stars; diff --git a/src/components/PalmistryV1/components/Stars/styles.module.scss b/src/components/PalmistryV1/components/Stars/styles.module.scss new file mode 100644 index 0000000..795cd11 --- /dev/null +++ b/src/components/PalmistryV1/components/Stars/styles.module.scss @@ -0,0 +1,6 @@ +.container { + display: flex; + flex-direction: row; + gap: 1px; + width: fit-content; +} diff --git a/src/components/PalmistryV1/components/StepperBar/index.tsx b/src/components/PalmistryV1/components/StepperBar/index.tsx new file mode 100644 index 0000000..035fc76 --- /dev/null +++ b/src/components/PalmistryV1/components/StepperBar/index.tsx @@ -0,0 +1,35 @@ +import styles from "./styles.module.scss"; +import { useDynamicSize } from "@/hooks/useDynamicSize"; +import CircleArrow from "@/components/pages/ABDesign/v1/ui/CircleArrow"; + +interface IStepperBarProps { + length: number; + currentStep: number; + color?: string; + className?: string; +} + +function StepperBar({ + length, + currentStep, + color = "#7337A8", + className = "", +}: IStepperBarProps) { + const { width, elementRef } = useDynamicSize({}); + + return ( +
+ +
+ ); +} + +export default StepperBar; diff --git a/src/components/PalmistryV1/components/StepperBar/styles.module.scss b/src/components/PalmistryV1/components/StepperBar/styles.module.scss new file mode 100644 index 0000000..97d7ee8 --- /dev/null +++ b/src/components/PalmistryV1/components/StepperBar/styles.module.scss @@ -0,0 +1,38 @@ +.container { + width: 100%; + display: grid; + gap: 15px; +} + +.step-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0; + width: 100%; +} + +.circle { + width: 16px; + height: 16px; + border-radius: 50%; + border-width: 1px; + border-style: solid; + display: flex; + align-items: center; + justify-content: center; + font-size: 8px; +} + +.line-container { + height: 6px; + width: 100%; + background-color: #d2d1f9; +} + +.line { + height: 100%; + /* width: 0; */ + transition: width 0.4s linear 0s; +} diff --git a/src/components/PalmistryV1/components/Timer/index.tsx b/src/components/PalmistryV1/components/Timer/index.tsx new file mode 100644 index 0000000..f2fc96c --- /dev/null +++ b/src/components/PalmistryV1/components/Timer/index.tsx @@ -0,0 +1,15 @@ +import useTimer from "@/hooks/palmistry/use-timer"; +import styles from "./styles.module.scss"; + +function Timer() { + const time = useTimer(); + const [minutes, seconds] = time.split(":"); + return ( +
+
{minutes}
: +
{seconds}
+
+ ); +} + +export default Timer; diff --git a/src/components/PalmistryV1/components/Timer/styles.module.scss b/src/components/PalmistryV1/components/Timer/styles.module.scss new file mode 100644 index 0000000..9114fcb --- /dev/null +++ b/src/components/PalmistryV1/components/Timer/styles.module.scss @@ -0,0 +1,16 @@ +.container { + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; +} + +.minutes, +.seconds { + font-size: 20px; + color: #000; + font-weight: 500; + background-color: #fff; + border-radius: 4px; + padding: 8px 4px; +} diff --git a/src/components/PalmistryV1/components/WhatIncluded/index.tsx b/src/components/PalmistryV1/components/WhatIncluded/index.tsx new file mode 100644 index 0000000..a51bb68 --- /dev/null +++ b/src/components/PalmistryV1/components/WhatIncluded/index.tsx @@ -0,0 +1,60 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import { palmistryV1Prefix } from "@/routes"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function WhatIncluded() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + return ( +
+ + {translate("/trial-payment.what_included.title")} + +
+ Hand +

+ {translate("/trial-payment.what_included.point1", { + bold: ( + {translate("/trial-payment.what_included.point1_bold")} + ), + })} +

+
+
+ 1 : 1 +

+ {translate("/trial-payment.what_included.point2", { + bold: ( + {translate("/trial-payment.what_included.point2_bold")} + ), + })} +

+
+
+ Daily +

+ {translate("/trial-payment.what_included.point3", { + bold: ( + {translate("/trial-payment.what_included.point3_bold")} + ), + })} +

+
+
+ Cosmic +

+ {translate("/trial-payment.what_included.point4")} +

+
+
+ Calendar +

+ {translate("/trial-payment.what_included.point5")} +

+
+
+ ); +} + +export default WhatIncluded; diff --git a/src/components/PalmistryV1/components/WhatIncluded/styles.module.scss b/src/components/PalmistryV1/components/WhatIncluded/styles.module.scss new file mode 100644 index 0000000..bc5f4d9 --- /dev/null +++ b/src/components/PalmistryV1/components/WhatIncluded/styles.module.scss @@ -0,0 +1,32 @@ +.container { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 30px; + background: linear-gradient(to bottom, #5891ff31, #ffffff31); + padding: 18px 29px 35px; + margin-top: 31px; +} + +.title { + font-size: 28px; + color: #222222; +} + +.row { + width: 100%; + display: grid; + grid-template-columns: 42px 1fr; + align-items: center; + gap: 12px; + margin-bottom: 12px; + + & > .text { + font-size: 16px; + + & > b { + font-size: 18px; + } + } +} diff --git a/src/components/PalmistryV1/data/index.tsx b/src/components/PalmistryV1/data/index.tsx new file mode 100644 index 0000000..c8620cd --- /dev/null +++ b/src/components/PalmistryV1/data/index.tsx @@ -0,0 +1 @@ +export const answerTimeOut = 1000; diff --git a/src/components/PalmistryV1/images/SVG/Air/index.tsx b/src/components/PalmistryV1/images/SVG/Air/index.tsx new file mode 100644 index 0000000..1326401 --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Air/index.tsx @@ -0,0 +1,75 @@ +function AirSVG() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default AirSVG; diff --git a/src/components/PalmistryV1/images/SVG/Earth/index.tsx b/src/components/PalmistryV1/images/SVG/Earth/index.tsx new file mode 100644 index 0000000..566be07 --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Earth/index.tsx @@ -0,0 +1,40 @@ +function EarthSVG() { + return ( + + + + + + + + ); +} + +export default EarthSVG; diff --git a/src/components/PalmistryV1/images/SVG/Fire/index.tsx b/src/components/PalmistryV1/images/SVG/Fire/index.tsx new file mode 100644 index 0000000..be7c78c --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Fire/index.tsx @@ -0,0 +1,18 @@ +function FireSVG() { + return ( + + + + ); +} + +export default FireSVG; diff --git a/src/components/PalmistryV1/images/SVG/Infinite/index.tsx b/src/components/PalmistryV1/images/SVG/Infinite/index.tsx new file mode 100644 index 0000000..4c99185 --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Infinite/index.tsx @@ -0,0 +1,22 @@ +function Infinite() { + return ( + + + + + + + ); +} + +export default Infinite; diff --git a/src/components/PalmistryV1/images/SVG/People/index.tsx b/src/components/PalmistryV1/images/SVG/People/index.tsx new file mode 100644 index 0000000..779d48f --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/People/index.tsx @@ -0,0 +1,21 @@ +import { SVGProps } from "react"; + +function People(props: SVGProps) { + return ( + + + + ); +} + +export default People; diff --git a/src/components/PalmistryV1/images/SVG/ScanInstruction/index.tsx b/src/components/PalmistryV1/images/SVG/ScanInstruction/index.tsx new file mode 100644 index 0000000..b435c49 --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/ScanInstruction/index.tsx @@ -0,0 +1,72 @@ +function ScanInstructionSVG() { + return ( + + + + + + + + + + + + + + + + ); +} + +export default ScanInstructionSVG; diff --git a/src/components/PalmistryV1/images/SVG/Star/index.tsx b/src/components/PalmistryV1/images/SVG/Star/index.tsx new file mode 100644 index 0000000..2f2873c --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Star/index.tsx @@ -0,0 +1,19 @@ +function StarSVG() { + return ( + + + + ); +} + +export default StarSVG; diff --git a/src/components/PalmistryV1/images/SVG/Tab/index.tsx b/src/components/PalmistryV1/images/SVG/Tab/index.tsx new file mode 100644 index 0000000..7b5b5dc --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Tab/index.tsx @@ -0,0 +1,28 @@ +import { SVGProps } from "react"; + +interface Props { + color?: string; +} + +function TabSVG({ + color = "#247DCF", + ...props +}: Props & SVGProps) { + return ( + + + + ); +} + +export default TabSVG; diff --git a/src/components/PalmistryV1/images/SVG/Water/index.tsx b/src/components/PalmistryV1/images/SVG/Water/index.tsx new file mode 100644 index 0000000..302e68e --- /dev/null +++ b/src/components/PalmistryV1/images/SVG/Water/index.tsx @@ -0,0 +1,18 @@ +function WaterSVG() { + return ( + + + + ); +} + +export default WaterSVG; diff --git a/src/components/PalmistryV1/pages/Birthdate/index.tsx b/src/components/PalmistryV1/pages/Birthdate/index.tsx new file mode 100644 index 0000000..c84d420 --- /dev/null +++ b/src/components/PalmistryV1/pages/Birthdate/index.tsx @@ -0,0 +1,77 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import { DatePicker } from "@/components/DateTimePicker"; +import { useState } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import Button from "../../components/Button"; +import metricService from "@/services/metric/metricService"; +import routes, { palmistryV1Prefix } from "@/routes"; +import { useNavigate } from "react-router-dom"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function Birthdate() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const birthdateFromStore = useSelector(selectors.selectBirthdate); + const [birthdate, setBirthdate] = useState(birthdateFromStore); + const [isDisabled, setIsDisabled] = useState(true); + + const handleValid = (_birthdate: string) => { + setBirthdate(_birthdate); + setIsDisabled(_birthdate === ""); + }; + + const getAge = () => { + const today = new Date(); + const birthDate = new Date(birthdate); + let age = today?.getFullYear() - birthDate?.getFullYear(); + const m = today?.getMonth() - birthDate?.getMonth(); + if (m < 0 || (m === 0 && today?.getDate() < birthDate?.getDate())) { + age--; + } + return age; + }; + + const handleNext = () => { + const age = getAge(); + metricService.userParams({ + age, + }); + dispatch(actions.form.addDate(birthdate)); + dispatch(actions.questionnaire.update({ birthdate })); + navigate(routes.client.palmistryV1PalmsInformation()); + }; + + return ( +
+ + {translate("/birthdate.title")} + +

{translate("/birthdate.text")}

+ setIsDisabled(true)} + inputClassName="date-picker-input" + /> + + Hand with eye +
+ ); +} + +export default Birthdate; diff --git a/src/components/PalmistryV1/pages/Birthdate/styles.module.scss b/src/components/PalmistryV1/pages/Birthdate/styles.module.scss new file mode 100644 index 0000000..0d9f9df --- /dev/null +++ b/src/components/PalmistryV1/pages/Birthdate/styles.module.scss @@ -0,0 +1,22 @@ +.page-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + margin-bottom: 0; + font-size: 27px; +} + +.description { + margin: 16px 0 25px; + text-align: center; + font-size: 20px; +} + +.image { + margin-top: 56px; +} diff --git a/src/components/PalmistryV1/pages/Camera/index.tsx b/src/components/PalmistryV1/pages/Camera/index.tsx new file mode 100644 index 0000000..4c08009 --- /dev/null +++ b/src/components/PalmistryV1/pages/Camera/index.tsx @@ -0,0 +1,83 @@ +import PalmCameraModal from "@/components/palmistry/palm-camera-modal/palm-camera-modal"; +import styles from "./styles.module.scss"; +import { DataURIToBlob } from "@/services/data"; +import { useApi } from "@/api"; +import { IPalmistryFinger } from "@/api/resources/Palmistry"; +import { IPalmistryFingerLocal } from "@/store/palmistry"; +import { useDispatch } from "react-redux"; +import { actions } from "@/store"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { useState } from "react"; +import Loader, { LoaderColor } from "@/components/Loader"; + +const fingersNames = { + thumb: "Thumb finger", + index_finger: "Index finger", + middle_finger: "Middle finger", + ring_finger: "Ring finger", + pinky: "Little finger", +}; + +const setFingersNames = ( + fingers: IPalmistryFinger[] +): IPalmistryFingerLocal[] => { + if (!fingers) return []; + return fingers.map((finger) => { + return { + ...finger, + fingerName: fingersNames[finger.name as keyof typeof fingersNames], + }; + }); +}; + +function Camera() { + const navigate = useNavigate(); + const api = useApi(); + const dispatch = useDispatch(); + const [isLoading, setIsLoading] = useState(false); + + const getLines = async (file: File | Blob) => { + setIsLoading(true); + const formData = new FormData(); + formData.append("file", file); + const result = await api.getPalmistryLines({ formData }); + const fingers = setFingersNames(result?.fingers); + + dispatch( + actions.palmistry.update({ + lines: result?.lines, + fingers, + }) + ); + setIsLoading(false); + }; + const onTakePhoto = async (photo: string) => { + // setIsUpladProcessing(true); + const file = DataURIToBlob(photo); + await getLines(file); + // setPalmPhoto(photo as string); + + dispatch( + actions.palmistry.update({ + photo, + }) + ); + navigate(routes.client.palmistryV1ScannedPhoto()); + }; + return ( + <> + {!isLoading && ( + console.log("close")} + onTakePhoto={onTakePhoto} + /> + )} + {isLoading && ( + + )} + + ); +} + +export default Camera; diff --git a/src/components/PalmistryV1/pages/Camera/styles.module.scss b/src/components/PalmistryV1/pages/Camera/styles.module.scss new file mode 100644 index 0000000..7459518 --- /dev/null +++ b/src/components/PalmistryV1/pages/Camera/styles.module.scss @@ -0,0 +1,6 @@ +.loader { + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; +} diff --git a/src/components/PalmistryV1/pages/ElementResonates/index.tsx b/src/components/PalmistryV1/pages/ElementResonates/index.tsx new file mode 100644 index 0000000..50c99a6 --- /dev/null +++ b/src/components/PalmistryV1/pages/ElementResonates/index.tsx @@ -0,0 +1,81 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import Answer from "../../components/Answer"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { sleep } from "@/services/date"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { answerTimeOut } from "../../data"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useMemo } from "react"; +import WaterSVG from "../../images/SVG/Water"; +import FireSVG from "../../images/SVG/Fire"; +import AirSVG from "../../images/SVG/Air"; +import EarthSVG from "../../images/SVG/Earth"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; + +function ElementResonates() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { elementResonates } = useSelector(selectors.selectPalmistryV1Answers); + useLottie({ + preloadKey: ELottieKeys.letScan, + }); + + const answers = useMemo( + () => [ + { + id: "water", + title: translate("/element-resonates.answer1"), + Icon: , + }, + { + id: "fire", + title: translate("/element-resonates.answer2"), + Icon: , + }, + { + id: "air", + title: translate("/element-resonates.answer3"), + Icon: , + }, + { + id: "earth", + title: translate("/element-resonates.answer4"), + Icon: , + }, + ], + [translate] + ); + + const handleClick = async (id: string) => { + dispatch(actions.palmistryV1Answers.update({ elementResonates: id })); + if (id !== elementResonates) await sleep(answerTimeOut); + navigate(routes.client.palmistryV1FavoriteColor()); + }; + + return ( +
+ + {translate("/element-resonates.title")} + + {answers.map(({ Icon, ...answers }, index) => ( + handleClick(answers.id)} + className={styles.answer} + > + {Icon} +

{answers.title}

+ + ))} +
+ ); +} + +export default ElementResonates; diff --git a/src/components/PalmistryV1/pages/ElementResonates/styles.module.scss b/src/components/PalmistryV1/pages/ElementResonates/styles.module.scss new file mode 100644 index 0000000..b76b428 --- /dev/null +++ b/src/components/PalmistryV1/pages/ElementResonates/styles.module.scss @@ -0,0 +1,5 @@ +.answer { + justify-content: flex-start; + padding-left: 15px; + gap: 6px; +} diff --git a/src/components/PalmistryV1/pages/Email/index.tsx b/src/components/PalmistryV1/pages/Email/index.tsx new file mode 100644 index 0000000..f62338b --- /dev/null +++ b/src/components/PalmistryV1/pages/Email/index.tsx @@ -0,0 +1,145 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import EmailInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/EmailInput"; +import { useEffect, useState } from "react"; +import { useDispatch } from "react-redux"; +import { actions } from "@/store"; +import Button from "../../components/Button"; +import { useAuthentication } from "@/hooks/authentication/use-authentication"; +import { ESourceAuthorization } from "@/api/resources/User"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import Loader, { LoaderColor } from "@/components/Loader"; +import Policy from "@/components/Policy"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import metricService, { + EGoals, + EMetrics, +} from "@/services/metric/metricService"; + +function Email() { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { error, isLoading, token, user, authorization } = useAuthentication(); + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + + const [email, setEmail] = useState(""); + const [isValidEmail, setIsValidEmail] = useState(false); + const [isDisabled, setIsDisabled] = useState(true); + const [isAuth, setIsAuth] = useState(false); + + const handleValidEmail = (email: string) => { + dispatch(actions.form.addEmail(email)); + setEmail(email); + setIsValidEmail(true); + }; + + useEffect(() => { + if (isValidEmail) { + setIsDisabled(false); + } else { + setIsDisabled(true); + } + }, [isValidEmail, email]); + + const handleClick = () => { + authorize(); + // metricService.reachGoal(EGoals.ENTERED_EMAIL, [ + // EMetrics.KLAVIYO, + // EMetrics.YANDEX, + // EMetrics.FACEBOOK, + // ]); + }; + + const authorize = async () => { + metricService.reachGoal(EGoals.LEAD, [EMetrics.FACEBOOK]); + await authorization(email, ESourceAuthorization["aura.palmistry"]); + }; + + useEffect(() => { + if (user && token?.length && !isLoading && !error) { + setIsAuth(true); + dispatch(actions.paywalls.resetIsMustUpdate()); + const timeout = setTimeout(() => { + navigate(routes.client.palmistryV1TrialChoice()); + }, 1000); + return () => { + clearTimeout(timeout); + }; + } + }, [dispatch, error, isLoading, navigate, token?.length, user]); + + return ( + <> + + {translate("/email.title")} + + setIsValidEmail(false)} + /> +

{translate("/email.not_share")}

+ + + {translate( + "/email.policy", + { + eulaLink: ( + + {translate( + "/email.policy_eula", + undefined, + ELocalesPlacement.V1 + )} + + ), + privacyPolicy: ( + + {translate("privacy_policy", undefined, ELocalesPlacement.V1)} + + ), + }, + ELocalesPlacement.V1 + )} + + {!!error?.length && ( + + {translate("went_wrong", undefined, ELocalesPlacement.PalmistryV1)} + + )} + + ); +} + +export default Email; diff --git a/src/components/PalmistryV1/pages/Email/styles.module.scss b/src/components/PalmistryV1/pages/Email/styles.module.scss new file mode 100644 index 0000000..da86796 --- /dev/null +++ b/src/components/PalmistryV1/pages/Email/styles.module.scss @@ -0,0 +1,36 @@ +.title { + font-size: 28px; + line-height: 125%; + font-weight: 500; +} + +.input { + background-color: #f3f3f3; + min-height: 60px; +} + +.not-share { + padding-top: 5px; + font-size: 20px; + line-height: 125%; + text-align: center; +} + +.button { + margin-top: 50px; +} + +.policy { + font-size: 16px; + margin-top: 20px; + line-height: 125%; + + & .link { + color: #057dd4; + } +} + +.success-icon { + height: 46px; + width: auto; +} diff --git a/src/components/PalmistryV1/pages/FavoriteColor/index.tsx b/src/components/PalmistryV1/pages/FavoriteColor/index.tsx new file mode 100644 index 0000000..7620224 --- /dev/null +++ b/src/components/PalmistryV1/pages/FavoriteColor/index.tsx @@ -0,0 +1,93 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import Answer from "../../components/Answer"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { sleep } from "@/services/date"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { answerTimeOut } from "../../data"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useMemo } from "react"; +import TabSVG from "../../images/SVG/Tab"; +import { usePreloadImages } from "@/hooks/preload/images"; + +function FavoriteColor() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { favoriteColor } = useSelector(selectors.selectPalmistryV1Answers); + usePreloadImages([ + "/v1/palmistry/trial-payment/girl.png", + "/v1/palmistry/reviews.png", + "/v1/palmistry/trial-payment/avatar-1.png", + "/v1/palmistry/trial-payment/avatar-2.png", + "/v1/palmistry/trial-payment/avatar-3.png", + "/v1/palmistry/trial-payment/avatar-4.png", + ]); + + const answers = useMemo( + () => [ + { + id: "blue", + title: translate("/favorite-color.answer1"), + }, + { + id: "green", + title: translate("/favorite-color.answer2"), + color: "#20C63B", + }, + { + id: "orange", + title: translate("/favorite-color.answer3"), + color: "#EFA006", + }, + { + id: "violet", + title: translate("/favorite-color.answer4"), + color: "#7B29E4", + }, + { + id: "red", + title: translate("/favorite-color.answer5"), + color: "#FB3334", + }, + { + id: "yellow", + title: translate("/favorite-color.answer6"), + color: "#E4DD29", + }, + ], + [translate] + ); + + const handleClick = async (id: string) => { + dispatch(actions.palmistryV1Answers.update({ favoriteColor: id })); + if (id !== favoriteColor) await sleep(answerTimeOut); + navigate(routes.client.palmistryV1HeadOrHeart()); + }; + + return ( +
+ + {translate("/favorite-color.title")} + + {answers.map((answers, index) => ( + handleClick(answers.id)} + className={styles.answer} + selectedClassName={styles.selected} + > + +

{answers.title}

+ + ))} +
+ ); +} + +export default FavoriteColor; diff --git a/src/components/PalmistryV1/pages/FavoriteColor/styles.module.scss b/src/components/PalmistryV1/pages/FavoriteColor/styles.module.scss new file mode 100644 index 0000000..0f17614 --- /dev/null +++ b/src/components/PalmistryV1/pages/FavoriteColor/styles.module.scss @@ -0,0 +1,19 @@ +.answer { + justify-content: flex-start; + padding-left: 70px; + gap: 6px; + object-fit: cover; + background-repeat: no-repeat; + position: relative; + overflow: hidden; + + &.selected { + transform: scale(1.02); + } +} + +.tab { + position: absolute; + left: 0; + top: 0; +} diff --git a/src/components/PalmistryV1/pages/FindHappiness/index.tsx b/src/components/PalmistryV1/pages/FindHappiness/index.tsx new file mode 100644 index 0000000..c705664 --- /dev/null +++ b/src/components/PalmistryV1/pages/FindHappiness/index.tsx @@ -0,0 +1,73 @@ +import routes, { palmistryV1Prefix } from "@/routes"; +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import Button from "../../components/Button"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useDispatch } from "react-redux"; +import { useEffect } from "react"; +import { actions } from "@/store"; +import StarSVG from "../../images/SVG/Star"; +import { usePreloadImages } from "@/hooks/preload/images"; + +function FindHappiness() { + const navigate = useNavigate(); + const dispatch = useDispatch(); + const location = useLocation(); + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + usePreloadImages(["/male-gender.webp", "/female-gender.webp"]); + + useEffect(() => { + const feature = location.pathname.replace( + routes.client.palmistryV1Welcome(), + "" + ); + dispatch( + actions.userConfig.setFeature( + feature.includes("/v1/gender") ? "" : feature + ) + ); + }, [dispatch, location.pathname]); + + return ( + <> +
+
+ darts +
    +
  1. {translate("/find-your-happiness.point1")}
    2. +
  2. + {translate("/find-your-happiness.point2")} +
    3. +
+
+
+ +
    +
  1. {translate("/find-your-happiness.point3")}
    2. +
  2. {translate("/find-your-happiness.point4")}
    3. +
+
+
+ Hand with lines + + {translate("/find-your-happiness.title")} + +
+ +
+

+ {translate("/find-your-happiness.text")} +

+ + ); +} + +export default FindHappiness; diff --git a/src/components/PalmistryV1/pages/FindHappiness/styles.module.scss b/src/components/PalmistryV1/pages/FindHappiness/styles.module.scss new file mode 100644 index 0000000..b6e523f --- /dev/null +++ b/src/components/PalmistryV1/pages/FindHappiness/styles.module.scss @@ -0,0 +1,54 @@ +.blocks-container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + gap: 10px; + + & > .block { + display: flex; + flex-direction: row; + align-items: center; + height: 52px; + padding: 12px 9px; + border: solid 2px #3871c1; + border-radius: 10px; + gap: 6px; + + & > ol { + list-style-type: disc; + padding-left: 15px; + + & > li { + margin-bottom: 2px; + font-size: 12px; + } + } + } +} + +.image { + width: 100%; + max-width: 250px; + margin-top: -21px; + min-height: 341px; +} + +.title { + margin-bottom: 0; +} + +.description { + text-align: center; + font-size: 14px; +} + +.button-container { + width: 100%; + position: sticky; + bottom: 0dvh; + padding: 16px 0; + -webkit-backdrop-filter: blur(2px); + backdrop-filter: blur(2px); +} diff --git a/src/components/PalmistryV1/pages/GenderPalmistry/index.tsx b/src/components/PalmistryV1/pages/GenderPalmistry/index.tsx new file mode 100644 index 0000000..196420b --- /dev/null +++ b/src/components/PalmistryV1/pages/GenderPalmistry/index.tsx @@ -0,0 +1,71 @@ +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import ChooseGender from "@/components/pages/ABDesign/v1/components/ChooseGender"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { Gender } from "@/data"; +import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy"; +import Toast from "@/components/pages/ABDesign/v1/components/Toast"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useCallback, useEffect, useState } from "react"; +import { sleep } from "@/services/date"; +import metricService from "@/services/metric/metricService"; +import { genders } from "@/components/pages/ABDesign/v1/data/genders"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { usePreloadImages } from "@/hooks/preload/images"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; + +function GenderPalmistry() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { checked: privacyPolicyChecked } = useSelector( + selectors.selectPrivacyPolicy + ); + const { gender } = useSelector(selectors.selectQuestionnaire); + const [isSelected, setIsSelected] = useState(false); + usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]); + useLottie({ + preloadKey: ELottieKeys.handSymbols, + }); + + const selectGender = async (_gender: Gender | null) => { + setIsSelected(true); + dispatch(actions.questionnaire.update({ gender: _gender?.id })); + }; + + const handleNext = useCallback(async () => { + if (!gender) return; + await sleep(1000); + metricService.userParams({ + gender: genders.find((g) => g.id === gender)?.name, + }); + return navigate(routes.client.palmistryV1Birthdate()); + }, [gender, navigate]); + + useEffect(() => { + if (privacyPolicyChecked && gender && isSelected) { + handleNext(); + } + }, [gender, handleNext, isSelected, privacyPolicyChecked]); + + return ( + <> + + {translate("/gender.title")} + +

{translate("/gender.description")}

+ + + {gender && !privacyPolicyChecked && ( + + {translate("/gender.toast", undefined, ELocalesPlacement.V1)} + + )} + + ); +} + +export default GenderPalmistry; diff --git a/src/components/PalmistryV1/pages/GenderPalmistry/styles.module.scss b/src/components/PalmistryV1/pages/GenderPalmistry/styles.module.scss new file mode 100644 index 0000000..d7f2660 --- /dev/null +++ b/src/components/PalmistryV1/pages/GenderPalmistry/styles.module.scss @@ -0,0 +1,28 @@ +.title { + margin-top: 30px; + font-size: 28px; + font-weight: 500; + line-height: 125%; + margin-bottom: 0; +} + +.description { + margin-top: 16px; + font-size: 20px; + line-height: 125%; + text-align: center; + max-width: 302px; +} + +.privacy-policy { + max-width: 316px; + margin-top: 26px; +} + +.toast-container { + position: fixed; + bottom: calc(0dvh + 16px); + margin-top: 16px; + max-width: 460px; + padding: 0 24px; +} diff --git a/src/components/PalmistryV1/pages/HeadOrHeart/index.tsx b/src/components/PalmistryV1/pages/HeadOrHeart/index.tsx new file mode 100644 index 0000000..4a507a8 --- /dev/null +++ b/src/components/PalmistryV1/pages/HeadOrHeart/index.tsx @@ -0,0 +1,74 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import Answer from "../../components/Answer"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { sleep } from "@/services/date"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { answerTimeOut } from "../../data"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useMemo } from "react"; +import { usePreloadImages } from "@/hooks/preload/images"; + +function HeadOrHeart() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers); + usePreloadImages([ + "/v1/palmistry/money-back.svg", + "/v1/palmistry/hand.svg", + "/v1/palmistry/1_1.svg", + "/v1/palmistry/daily.svg", + "/v1/palmistry/cosmic.svg", + "/v1/palmistry/calendar.svg", + "/v1/palmistry/reviews/rebecca.png", + "/v1/palmistry/reviews/mika.png", + "/v1/palmistry/reviews/amanda.png", + "/v1/palmistry/partners.png", + ]); + + const answers = useMemo( + () => [ + { + id: "heart", + title: translate("/head-or-heart.answer1"), + }, + { + id: "head", + title: translate("/head-or-heart.answer2"), + }, + { + id: "both", + title: translate("/head-or-heart.answer3"), + }, + ], + [translate] + ); + + const handleClick = async (id: string) => { + dispatch(actions.palmistryV1Answers.update({ headOrHeart: id })); + if (id !== headOrHeart) await sleep(answerTimeOut); + navigate(routes.client.palmistryV1HeadOrHeartResult()); + }; + + return ( +
+ + {translate("/head-or-heart.title")} + + {answers.map((answers, index) => ( + handleClick(answers.id)} + /> + ))} +
+ ); +} + +export default HeadOrHeart; diff --git a/src/components/PalmistryV1/pages/HeadOrHeart/styles.module.scss b/src/components/PalmistryV1/pages/HeadOrHeart/styles.module.scss new file mode 100644 index 0000000..5bfbb7c --- /dev/null +++ b/src/components/PalmistryV1/pages/HeadOrHeart/styles.module.scss @@ -0,0 +1,3 @@ +.container { + width: 100%; +} diff --git a/src/components/PalmistryV1/pages/HeadOrHeartResult/index.tsx b/src/components/PalmistryV1/pages/HeadOrHeartResult/index.tsx new file mode 100644 index 0000000..65b9027 --- /dev/null +++ b/src/components/PalmistryV1/pages/HeadOrHeartResult/index.tsx @@ -0,0 +1,99 @@ +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import styles from "./styles.module.scss"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; +import Title from "@/components/Title"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { getZodiacSignByDate } from "@/services/zodiac-sign"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; +import Button from "../../components/Button"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; + +const animations = { + both: ELottieKeys.scalesNeutralPalmistry, + heart: ELottieKeys.scalesHeartPalmistry, + head: ELottieKeys.scalesHeadPalmistry, +}; + +function HeadOrHeartResult() { + const navigate = useNavigate(); + const { translate } = useTranslations(ELocalesPlacement.V1); + const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers); + + const { animationData } = useLottie({ + loadKey: animations[headOrHeart as keyof typeof animations], + }); + + const birthdate = useSelector(selectors.selectBirthdate); + const zodiacSign = getZodiacSignByDate(birthdate); + + const handleBack = () => { + navigate(-1); + }; + + const handleNext = () => { + navigate(`${routes.client.palmistryV1RelateFollowing()}/1`); + }; + + return ( +
+
+ {animationData && ( + + )} +
+ + {headOrHeart === "both" && + translate("/both.title", { + wonderful: ( + <b style={{ color: "#224e90" }}>{translate("/both.wonderful")}</b> + ), + zodiacSign: ( + <b style={{ color: "#224e90" }}> + {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)} + </b> + ), + })} + {headOrHeart === "head" && + translate("/with-head.title", { + zodiacSign: ( + <b style={{ color: "#224e90" }}> + {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)} + </b> + ), + })} + {headOrHeart === "heart" && + translate("/with-heart.title", { + zodiacSign: ( + <b style={{ color: "#224e90" }}> + {translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)} + </b> + ), + })} + +
+ + +
+
+ ); +} + +export default HeadOrHeartResult; diff --git a/src/components/PalmistryV1/pages/HeadOrHeartResult/styles.module.scss b/src/components/PalmistryV1/pages/HeadOrHeartResult/styles.module.scss new file mode 100644 index 0000000..1923935 --- /dev/null +++ b/src/components/PalmistryV1/pages/HeadOrHeartResult/styles.module.scss @@ -0,0 +1,29 @@ +.title { + font-size: 23px; + font-weight: normal; +} + +.buttons-container { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 24px; + + & > .button { + width: 48%; + min-width: 0px; + font-size: 23px; + height: 44px; + min-height: 0px; + + &.back-button { + background: none; + color: #2c2c2c; + border: solid #2c2c2c 2px; + } + } +} + +.lottie-animation { + aspect-ratio: 128 / 82; +} diff --git a/src/components/PalmistryV1/pages/LetScan/index.tsx b/src/components/PalmistryV1/pages/LetScan/index.tsx new file mode 100644 index 0000000..0de15d7 --- /dev/null +++ b/src/components/PalmistryV1/pages/LetScan/index.tsx @@ -0,0 +1,43 @@ +import routes from "@/routes"; +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import Button from "../../components/Button"; +import { useNavigate } from "react-router-dom"; +import BiometricData from "@/components/palmistry/biometric-data/biometric-data"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; + +function LetScan() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const { animationData } = useLottie({ + loadKey: ELottieKeys.letScan, + }); + + const handleNext = () => { + navigate(routes.client.palmistryV1ScanInstruction()); + }; + + return ( +
+ + + {translate("/let-scan.title")} + +

{translate("/let-scan.text")}

+ + +
+ ); +} + +export default LetScan; diff --git a/src/components/PalmistryV1/pages/LetScan/styles.module.scss b/src/components/PalmistryV1/pages/LetScan/styles.module.scss new file mode 100644 index 0000000..b94b0cf --- /dev/null +++ b/src/components/PalmistryV1/pages/LetScan/styles.module.scss @@ -0,0 +1,38 @@ +.page { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.image { + margin-top: 80px; +} + +.title { + margin-top: 36px; +} + +.text { + font-size: 20px; + text-align: center; + line-height: 125%; +} + +.button { + margin-top: 30px; +} + +.biometric { + text-align: center; + line-height: 125%; + margin-top: 20px; + + & > svg { + display: none; + } +} + +.lottie-animation { + aspect-ratio: 116 / 87; +} \ No newline at end of file diff --git a/src/components/PalmistryV1/pages/PalmsInformation/index.tsx b/src/components/PalmistryV1/pages/PalmsInformation/index.tsx new file mode 100644 index 0000000..5a4f7f2 --- /dev/null +++ b/src/components/PalmistryV1/pages/PalmsInformation/index.tsx @@ -0,0 +1,75 @@ +import routes from "@/routes"; +import styles from "./styles.module.scss"; +import Title from "@/components/Title"; +import Button from "../../components/Button"; +import Policy from "@/components/Policy"; +import { useTranslations } from "@/hooks/translations"; +import { useNavigate } from "react-router-dom"; +import { ELocalesPlacement } from "@/locales"; +import { DotLottieReact } from "@lottiefiles/dotlottie-react"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; + +function PalmsInformation() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const { animationData } = useLottie({ + loadKey: ELottieKeys.handSymbols, + preloadKey: ELottieKeys.scalesHeadPalmistry, + }); + + return ( +
+ {animationData && ( + + )} + + {translate("/palms-information.title")} + + + + {translate( + "privacy_text", + { + eulaLink: ( + + {translate("eula", undefined, ELocalesPlacement.V0)} + + ), + privacyLink: ( + + {translate("privacy_notice", undefined, ELocalesPlacement.V0)} + + ), + clickHere: ( + + {translate("here", undefined, ELocalesPlacement.V0)} + + ), + }, + ELocalesPlacement.V0 + )} + +
+ ); +} + +export default PalmsInformation; diff --git a/src/components/PalmistryV1/pages/PalmsInformation/styles.module.scss b/src/components/PalmistryV1/pages/PalmsInformation/styles.module.scss new file mode 100644 index 0000000..2d7f81a --- /dev/null +++ b/src/components/PalmistryV1/pages/PalmsInformation/styles.module.scss @@ -0,0 +1,19 @@ +.page-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 16px; +} + +.title { + font-size: 27px; + text-align: left; + font-weight: 500; + margin-top: 42px; +} + +.lottie-animation { + aspect-ratio: 233 / 261; +} diff --git a/src/components/PalmistryV1/pages/Payment/index.tsx b/src/components/PalmistryV1/pages/Payment/index.tsx new file mode 100644 index 0000000..d97d74a --- /dev/null +++ b/src/components/PalmistryV1/pages/Payment/index.tsx @@ -0,0 +1,94 @@ +import { useSelector } from "react-redux"; +import PaymentInformation from "../../components/PaymentInformation"; +import styles from "./styles.module.scss"; +import { selectors } from "@/store"; +import { getFormattedPrice } from "@/utils/price.utils"; +import Guarantees from "../../components/Guarantees"; +import Button from "../../components/Button"; +import PaymentModal from "../../components/PaymentModal"; +import { useEffect, useState } from "react"; +import { useNavigate, useSearchParams } from "react-router-dom"; +import routes from "@/routes"; +import { addCurrency, ELocalesPlacement } from "@/locales"; +import { useTranslations } from "@/hooks/translations"; +import Stars from "../../components/Stars"; + +function Payment() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const activeProductFromStore = useSelector(selectors.selectActiveProduct); + const currency = useSelector(selectors.selectCurrency); + const trialPrice = activeProductFromStore?.trialPrice || 0; + const fullPrice = activeProductFromStore?.price || 0; + const [isShowPaymentModal, setIsShowPaymentModal] = useState(false); + const [searchParams] = useSearchParams(); + const subscriptionStatus = + searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead"; + + const showModal = () => { + setIsShowPaymentModal(true); + }; + + useEffect(() => { + if (subscriptionStatus !== "subscribed") return; + const timer = setTimeout(() => { + navigate(routes.client.palmistryDiscount()); + }, 1500); + return () => clearTimeout(timer); + }, [navigate, subscriptionStatus]); + + return ( + <> +
+

+ {translate("/payment.app_number_one", { + color: {translate("/payment.app_number_one_color")}, + })} +

+ +
+ +
+ {translate("/payment.will_be_charged", { + trialPrice: addCurrency(getFormattedPrice(trialPrice), currency), + fullPrice: ( + {addCurrency(getFormattedPrice(fullPrice), currency)} + ), + save: addCurrency( + getFormattedPrice(fullPrice - trialPrice), + currency + ), + emailReminder: ( + {translate("/payment.will_be_charged_email_reminder")} + ), + trialInfo: ( + + {translate("/payment.will_be_charged_trial_info", { + trialDuration: activeProductFromStore?.trialDuration, + trialPrice: addCurrency( + getFormattedPrice(trialPrice), + currency + ), + })} + + ), + })} +
+ + {!isShowPaymentModal && subscriptionStatus !== "subscribed" && ( + + )} + + + ); +} + +export default Payment; diff --git a/src/components/PalmistryV1/pages/Payment/styles.module.scss b/src/components/PalmistryV1/pages/Payment/styles.module.scss new file mode 100644 index 0000000..a1193f9 --- /dev/null +++ b/src/components/PalmistryV1/pages/Payment/styles.module.scss @@ -0,0 +1,44 @@ +.prices-description { + font-size: 14px; + line-height: 125%; + margin-top: 12px; +} + +.button { + position: fixed; + bottom: calc(0dvh + 26px); + max-width: 343px; + font-size: 24px; +} + +.payment-modal-hide { + transform: translateY(150%); +} + +.payment-modal-active { + animation: appearance 1s; +} + +@keyframes appearance { + 0% { + transform: translateY(150%); + } + 100% { + transform: translateY(0); + } +} + +.app-number-one { + max-width: 240px; + text-align: center; + font-size: 14px; + line-height: 18.2px; + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + & span { + color: #224e90; + } +} diff --git a/src/components/PalmistryV1/pages/RelateFollowing/index.tsx b/src/components/PalmistryV1/pages/RelateFollowing/index.tsx new file mode 100644 index 0000000..bf7ae05 --- /dev/null +++ b/src/components/PalmistryV1/pages/RelateFollowing/index.tsx @@ -0,0 +1,90 @@ +import { Navigate, useNavigate, useParams } from "react-router-dom"; +import styles from "./styles.module.scss"; +import routes from "@/routes"; +import Title from "@/components/Title"; +import { useEffect, useMemo, useState } from "react"; +import { sleep } from "@/services/date"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; + +function RelateFollowing() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const { questionId } = useParams(); + const [activeButton, setActiveButton] = useState(); + + const questions = useMemo( + () => [ + { + id: "time_alone", + title: translate("/relate-following.question1"), + }, + { + id: "own_company", + title: translate("/relate-following.question2"), + }, + { + id: "socializing_in_groups", + title: translate("/relate-following.question3"), + }, + { + id: "loneliness", + title: translate("/relate-following.question4"), + }, + { + id: "independently", + title: translate("/relate-following.question5"), + }, + ], + [translate] + ); + useEffect(() => { + setActiveButton(null); + }, [questionId]); + + if (!questionId) + return ; + + const handleClick = async (answerIndex: number) => { + setActiveButton(answerIndex); + await sleep(400); + if (Number(questionId) < questions.length) { + return navigate( + `${routes.client.palmistryV1RelateFollowing()}/${ + Number(questionId) + 1 + }` + ); + } + return navigate(routes.client.palmistryV1LetScan()); + }; + + return ( +
+ + {translate("/relate-following.title")} + +

+ {questions[parseInt(questionId) - 1].title} +

+
+ {Array.from({ length: 5 }).map((_, index) => ( + + ))} +
+
+ {translate("/relate-following.strongly_disagree")} + {translate("/relate-following.strongly_agree")} +
+
+ ); +} + +export default RelateFollowing; diff --git a/src/components/PalmistryV1/pages/RelateFollowing/styles.module.scss b/src/components/PalmistryV1/pages/RelateFollowing/styles.module.scss new file mode 100644 index 0000000..d0f5079 --- /dev/null +++ b/src/components/PalmistryV1/pages/RelateFollowing/styles.module.scss @@ -0,0 +1,61 @@ +.title { + font-size: 27px; + text-align: center; + margin-bottom: 16px; +} + +.question { + width: 85%; + margin: 0 auto; + text-align: center; + line-height: 125%; + font-size: 20px; +} + +.buttons-container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + gap: 11px; + margin-top: 30px; + + & > .button { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 60px; + height: 60px; + background-color: #f1f1f1; + border: none; + border-radius: 5px; + box-shadow: 0px 3px 3px #00000024; + font-size: 29px; + color: #000; + cursor: pointer; + + &.selected { + background-color: #fff; + outline: solid #3f70b8 2px; + } + } +} + +.buttons-text-container { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + margin-top: 30px; + gap: 8px; + + & > span { + width: fit-content; + font-size: 20px; + line-height: 125%; + font-weight: 500; + max-width: 84px; + text-align: left; + } +} diff --git a/src/components/PalmistryV1/pages/RelationshipStatus/index.tsx b/src/components/PalmistryV1/pages/RelationshipStatus/index.tsx new file mode 100644 index 0000000..8b00df4 --- /dev/null +++ b/src/components/PalmistryV1/pages/RelationshipStatus/index.tsx @@ -0,0 +1,63 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import Answer from "../../components/Answer"; +import { useDispatch, useSelector } from "react-redux"; +import { actions, selectors } from "@/store"; +import { sleep } from "@/services/date"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { answerTimeOut } from "../../data"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { useMemo } from "react"; +import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie"; + +function RelationshipStatus() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { relationshipStatus } = useSelector( + selectors.selectPalmistryV1Answers + ); + useLottie({ + preloadKey: ELottieKeys.scalesNeutralPalmistry, + }); + + const answers = useMemo( + () => [ + { + id: "single", + title: translate("/relationship-status.answer1"), + }, + { + id: "in_relationship", + title: translate("/relationship-status.answer2"), + }, + ], + [translate] + ); + + const handleClick = async (id: string) => { + dispatch(actions.palmistryV1Answers.update({ relationshipStatus: id })); + if (id !== relationshipStatus) await sleep(answerTimeOut); + navigate(routes.client.palmistryV1ElementResonates()); + }; + + return ( +
+ + {translate("/relationship-status.title")} + + {answers.map((answers, index) => ( + handleClick(answers.id)} + /> + ))} +
+ ); +} + +export default RelationshipStatus; diff --git a/src/components/PalmistryV1/pages/RelationshipStatus/styles.module.scss b/src/components/PalmistryV1/pages/RelationshipStatus/styles.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/PalmistryV1/pages/ScanInstruction/index.tsx b/src/components/PalmistryV1/pages/ScanInstruction/index.tsx new file mode 100644 index 0000000..a50738a --- /dev/null +++ b/src/components/PalmistryV1/pages/ScanInstruction/index.tsx @@ -0,0 +1,41 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.scss"; +import routes from "@/routes"; +import Button from "../../components/Button"; +import BiometricData from "@/components/palmistry/biometric-data/biometric-data"; +import { useNavigate } from "react-router-dom"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import ScanInstructionSVG from "../../images/SVG/ScanInstruction"; +import { usePreloadImages } from "@/hooks/preload/images"; + +function ScanInstruction() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + usePreloadImages([ + "/v1/palmistry/love-line.svg", + "/v1/palmistry/head-line.svg", + "/v1/palmistry/life-line.svg", + "/v1/palmistry/fate-line.svg", + "/v1/palmistry/hand-little-finger.svg", + ]); + + const handleClick = () => { + navigate(routes.client.palmistryV1Camera()); + }; + + return ( +
+ + {translate("/scan-instruction.title")} + + + + +
+ ); +} + +export default ScanInstruction; diff --git a/src/components/PalmistryV1/pages/ScanInstruction/styles.module.scss b/src/components/PalmistryV1/pages/ScanInstruction/styles.module.scss new file mode 100644 index 0000000..b5e2f5f --- /dev/null +++ b/src/components/PalmistryV1/pages/ScanInstruction/styles.module.scss @@ -0,0 +1,27 @@ +.page { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.button { + margin-top: 40px; +} + +.description { + font-style: 14px; + line-height: 125%; + text-align: center; + margin-top: 20px; +} + +.biometric { + text-align: center; + line-height: 125%; + margin-top: 20px; + + & > svg { + display: none; + } +} diff --git a/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx b/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx new file mode 100644 index 0000000..e79ab42 --- /dev/null +++ b/src/components/PalmistryV1/pages/ScannedPhoto/index.tsx @@ -0,0 +1,124 @@ +import { useSelector } from "react-redux"; +import styles from "./styles.module.scss"; +import { selectors } from "@/store"; +import { useEffect, useMemo, useRef, useState } from "react"; +import { IPalmistryLine } from "@/api/resources/Palmistry"; +import Title from "@/components/Title"; +import { IPalmistryFingerLocal } from "@/store/palmistry"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import ScannedPhotoElement from "@/components/palmistry/scanned-photo/scanned-photo"; + +const drawElementChangeDelay = 1500; +const startDelay = 500; + +function ScannedPhoto() { + const navigate = useNavigate(); + const photo = useSelector(selectors.selectPalmistryPhoto); + const fingers = useSelector(selectors.selectPalmistryFingers); + const lines = useSelector(selectors.selectPalmistryLines); + + const changeTitleTimeOut = useRef(); + + const [currentElementIndex, setCurrentElementIndex] = useState(0); + const [title, setTitle] = useState(""); + const [shouldDisplayPalmLines, setShouldDisplayPalmLines] = useState(false); + const [smallPhotoState, setSmallPhotoState] = useState(false); + + const drawElements = useMemo(() => [...fingers, ...lines], [fingers, lines]); + + useEffect(() => { + if (!drawElements[currentElementIndex]) return; + changeTitleTimeOut.current = setTimeout(() => { + const title = + (drawElements[currentElementIndex] as IPalmistryFingerLocal) + .fingerName || drawElements[currentElementIndex].name; + setTitle(title); + if (currentElementIndex < drawElements.length - 1) { + setCurrentElementIndex((prevState) => prevState + 1); + } + }, drawElementChangeDelay); + + return () => { + if (changeTitleTimeOut.current) { + clearTimeout(changeTitleTimeOut.current); + } + }; + }, [currentElementIndex, drawElements]); + + useEffect(() => { + setShouldDisplayPalmLines( + lines.includes(drawElements[currentElementIndex] as IPalmistryLine) + ); + }, [currentElementIndex, drawElements, lines]); + + useEffect(() => { + if (currentElementIndex < drawElements.length - 1) return; + const timer = setTimeout(() => { + setSmallPhotoState(true); + }, drawElementChangeDelay * 2); + const goNextTimer = setTimeout( + () => navigate(routes.client.palmistryV1Email()), + drawElementChangeDelay * drawElements.length + 8000 + ); + + return () => { + if (timer) { + clearTimeout(timer); + } + if (goNextTimer) { + clearTimeout(goNextTimer); + } + }; + }, [currentElementIndex, drawElements.length, navigate]); + + useEffect(() => { + if (currentElementIndex < drawElements.length) return; + const timer = setTimeout(() => { + // navigate(routes.client.palmistryV1Email()); + }, drawElementChangeDelay + 1000); + return () => clearTimeout(timer); + }, [currentElementIndex, drawElements.length, navigate]); + + return ( +
+ + {title} + + +

+ We are putting together a comprehensive Palmistry Reading just for you! +

+ +

+ Wow, looks like there is a lot we can tell about your ambitious and + strong self-confident future. +

+
+ ); +} + +export default ScannedPhoto; diff --git a/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss b/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss new file mode 100644 index 0000000..2fb2b95 --- /dev/null +++ b/src/components/PalmistryV1/pages/ScannedPhoto/styles.module.scss @@ -0,0 +1,162 @@ +.page { + width: 100%; + padding: 74px 16px; + margin: 0 auto; + max-width: 560px; + height: fit-content; + min-height: 100dvh; + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + + --font-family-main: "SF Pro Text", sans-serif; + --stone-grey: #95959d; + --button-color: #121620; + --svg-blue: var(--strong-blue); + --pale-lavender: #dee5f9; + --pale-lavender-20: #dee5f9; + --orange: #ff9649; + --coral: #ff5c5d; + --rich-blue: #2b7cf6; + --bright-white: #fbfbfb; + --bright-red: #ff5758; + --light-gray: #d9d9d9; + --vivid-yellow: #ffc700; + --pale-gray: #c2cad8; + --pale-green: #75db9c; + --pale-cerulean: #82b7ef; + --greyish: #afafaf; + --vivid-green: #00ff38; + --dark-charcoal: #191f2d; + --blueish-gray: #6b76aa; + --violet: #9949ff; + --light-lavender: #c5c5d1; + --pale-pink: #fcd3df; + --cream-yellow: #fffbcd; + --pale-aqua: #c9fae6; + --pale-seafoam: #d3f1e1; + --pale-lilac: #dec6fe; + --pale-peach: #fdddc8; + --deep-charcoal: #1e1e1e; + --black: #000; + --bright-sea-green: #04a777; + --deep-cornflower-blue: #4663b7; + --charcoal-grey: #505051; + --pale-light-cerulean: #acd1ff; + --main-gradient: #fff; + --strong-blue: #066fde; + --strong-blue-text: #066fde; + --strong-blue-80: rgba(6, 111, 222, 0.8); + --midnight-black: #121620; + --footer-small-text: #121620; + --button-active: #fff; + --button-background: var(--pale-blue); + --button-active-bg: var(--strong-blue); + --slate-blue: #6b7baa; + --slate-blue-placeholder: #6b7baa; + --pale-blue: #eff2fd; + --pale-blue-input: #eff2fd; + --midnight-black-input: #121620; + --greyish-blue: #8e8e93; + --soft-blue: #4a567a; + --soft-blue-gray: #4a567a; + --soft-blue-periwinkle: #4a567a; + --gentle-blue: #9babd9; + --gentle-blue-svg: #9babd9; + --light-silver: #c7c7c7; + --light-silver-to-white: #c7c7c7; + --light-silver-to-lilac-blue: #c7c7c7; + --light-cornflower-blue: #c2ceee; + --white: #fff; + --dark-blue: #202b47; + --progress-line: #00a3ff; + --footer-shield: #b5c4ff; + --blue-color-text: #0066fd; + --black-color-text: #0066fd; + --transparent-to-gold: transparent; + --transparent-to-white: transparent; + --transparent-to-periwinkle: transparent; + --white-to-transparent: #fff; + --loader-background: rgba(16, 32, 77, 0.35); +} + +.title { + min-height: 36px; + margin: 0; + font-size: 24px; + &::first-letter { + text-transform: uppercase; + } +} + +.photo-container { + width: 100%; + height: fit-content; + position: relative; + // background-color: #cbcbcb; +} + +.scanned-photo { + width: 100%; +} + +.svg-objects { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.finger-point { + animation: finger-show 1s linear; + animation-fill-mode: forwards; + transform: scale(0); + transform-origin: center center; +} + +.line { + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 2px; + fill-rule: evenodd; + clip-rule: evenodd; + stroke-miterlimit: 1.5; + stroke-dasharray: 500; + stroke: #fff; + fill: none; + animation: line-show 1.5s linear; + animation-fill-mode: forwards; + + &.heart { + stroke: #f8d90f; + /* animation-delay: 4.5s; */ + } + + &.life { + stroke: #e51c39; + } + + &.head { + stroke: #00d114; + /* animation-delay: 1.5s; */ + } + + &.fate { + stroke: #05ced8; + /* animation-delay: 3s; */ + } +} + +@keyframes finger-show { + 100% { + transform: scale(1); + } +} + +@keyframes line-show { + 100% { + stroke-dashoffset: 0; + } +} diff --git a/src/components/PalmistryV1/pages/TrialChoice/index.tsx b/src/components/PalmistryV1/pages/TrialChoice/index.tsx new file mode 100644 index 0000000..5d9e924 --- /dev/null +++ b/src/components/PalmistryV1/pages/TrialChoice/index.tsx @@ -0,0 +1,84 @@ +import { useDispatch, useSelector } from "react-redux"; +import EmailSubstrate from "../../components/EmailSubstrate"; +import styles from "./styles.module.scss"; +import { actions, selectors } from "@/store"; +import Title from "@/components/Title"; +import PriceList from "@/components/pages/ABDesign/v1/components/PriceList"; +import { usePaywall } from "@/hooks/paywall/usePaywall"; +import { EPlacementKeys } from "@/api/resources/Paywall"; +import { ELocalesPlacement } from "@/locales"; +import { useState } from "react"; +import Button from "../../components/Button"; +import routes from "@/routes"; +import { useNavigate } from "react-router-dom"; +import Loader from "@/components/Loader"; +import { useTranslations } from "@/hooks/translations"; + +function TrialChoice() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + const dispatch = useDispatch(); + const { products, isLoading, currency, getText } = usePaywall({ + placementKey: EPlacementKeys["aura.placement.palmistry.main"], + localesPlacement: ELocalesPlacement.V1, + }); + + const [isDisabled, setIsDisabled] = useState(true); + + const selectedPrice = useSelector(selectors.selectSelectedPrice); + const email = useSelector(selectors.selectEmail); + const homeConfig = useSelector(selectors.selectHome); + + const handlePriceItem = () => { + setIsDisabled(false); + }; + + const handleNext = () => { + if (isDisabled) { + return; + } + dispatch( + actions.siteConfig.update({ + home: { pathFromHome: homeConfig.pathFromHome, isShowNavbar: false }, + }) + ); + navigate(routes.client.palmistryV1TrialPayment()); + }; + + return ( +
+ {!isLoading && ( + <> + + + {getText("text.0")} + + +
+ +

{getText("text.1")}

+
+ + + + )} + {isLoading && } +
+ ); +} + +export default TrialChoice; diff --git a/src/components/PalmistryV1/pages/TrialChoice/styles.module.scss b/src/components/PalmistryV1/pages/TrialChoice/styles.module.scss new file mode 100644 index 0000000..4cd952f --- /dev/null +++ b/src/components/PalmistryV1/pages/TrialChoice/styles.module.scss @@ -0,0 +1,102 @@ +.container { + position: relative; + display: flex; + flex-direction: column; + align-items: center; +} + +.email-substrate { + display: grid; + grid-template-columns: 1fr 36px; + align-content: center; + position: absolute; + max-width: calc(100% + 9px); + top: -18px; + right: -26px; + height: 46px; +} + +.title { + font-size: 28px; + line-height: 125%; + margin-top: 44px; + color: #2c2c2c; + font-weight: 500; +} + +.prices-container { + justify-content: center; + gap: 10px; + width: fit-content; + margin: 0 auto; +} + +.price-item { + border: solid #2c2c2c 1px; + width: 70px; + height: 65px; + font-size: 20px; + font-weight: 500; + + &:last-child::after { + content: ""; + position: absolute; + width: 2px; + height: 20px; + background-color: #224e90; + bottom: -30px; + left: 50%; + } + + &.price-item-active { + border: solid #224e90 3px !important; + background-color: transparent; + color: #224e90; + } +} + +.price-container { + position: relative; + width: 100%; + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 32px; +} + +.auxiliary-text { + font-size: 15px; + line-height: 125%; + font-weight: 600; + color: #0244a5; + width: 100%; + text-align: center; +} + +.cursor { + position: absolute; + width: 2px; + height: 20px; + background-color: #224e90; + top: 71px; + right: 34px; +} + +.loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.button { + margin-top: 20px; + transition: background 0.2s ease, color 0.2s ease; + + &:disabled { + border: solid #224e90 1px; + background: none; + color: #120d0d; + opacity: 1; + } +} diff --git a/src/components/PalmistryV1/pages/TrialPayment/index.tsx b/src/components/PalmistryV1/pages/TrialPayment/index.tsx new file mode 100644 index 0000000..7cfbd0b --- /dev/null +++ b/src/components/PalmistryV1/pages/TrialPayment/index.tsx @@ -0,0 +1,73 @@ +import Title from "@/components/Title"; +import AppNumberOne from "../../components/AppNumberOne"; +import Button from "../../components/Button"; +import JoinedToday from "../../components/JoinedToday"; +import PalmIsReady from "../../components/PalmIsReady"; +import styles from "./styles.module.scss"; +import HowWork from "../../components/HowWork"; +import WhatIncluded from "../../components/WhatIncluded"; +import PalmsSayAbout from "../../components/PalmsSayAbout"; +import Reviews from "../../components/Reviews"; +import routes, { palmistryV1Prefix } from "@/routes"; +import Footer from "../../components/Footer"; +import { useNavigate } from "react-router-dom"; +import { useTranslations } from "@/hooks/translations"; +import { ELocalesPlacement } from "@/locales"; +import { usePreloadImages } from "@/hooks/preload/images"; + +function TrialPayment() { + const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); + const navigate = useNavigate(); + usePreloadImages([ + "/v1/palmistry/ticket.svg", + ]) + + const handleNext = () => { + navigate(routes.client.palmistryV1Payment()); + }; + + return ( + <> + + + + + + {translate("/trial-payment.how_work.title")} + + + + + + + + {translate("/trial-payment.why_love", { + color: <span>{translate("/trial-payment.why_love_color")}</span>, + })} + + + + + {translate("/trial-payment.as_seen_in", { + color: ( + <span> + {translate("app_name", undefined, ELocalesPlacement.V1)} + </span> + ), + })} + + Partners +