diff --git a/index.html b/index.html index e1616df..5660b22 100755 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + diff --git a/public/dartsV1.svg b/public/dartsV1.svg new file mode 100644 index 0000000..1c14aff --- /dev/null +++ b/public/dartsV1.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/lovely_bedroom.png b/public/lovely_bedroom.png new file mode 100644 index 0000000..5ab7221 Binary files /dev/null and b/public/lovely_bedroom.png differ diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx index bc629c8..81fc4d3 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx @@ -157,7 +157,10 @@ function QuestionnairePage(): JSX.Element {
{currentQuestion && (!!currentStep || currentStep === 0) && ( diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css index aa076e8..2d5375e 100644 --- a/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css +++ b/src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css @@ -28,7 +28,7 @@ text-align: center; color: rgb(142, 140, 240); position: relative; - margin-top: 14px; + margin-top: 17px; } .title { @@ -66,7 +66,7 @@ position: absolute; top: 0; left: 0; - scale: 1.4; + /* scale: 1.4; */ } .header { diff --git a/src/components/pages/ABDesign/v1/data/onboarding.ts b/src/components/pages/ABDesign/v1/data/onboarding.ts index dd63561..95e3912 100644 --- a/src/components/pages/ABDesign/v1/data/onboarding.ts +++ b/src/components/pages/ABDesign/v1/data/onboarding.ts @@ -1,5 +1,5 @@ export const onboardingTitles = [ - "Welcome to AURA", + "Welcome\nto AURA", "Based on your answers", "We’ve created your astrological blueprint and guidance plan", "To help you find your perfect partner", diff --git a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx index a3e23fb..a8407a5 100644 --- a/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx +++ b/src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx @@ -552,6 +552,7 @@ export const stepsQuestionary: IStep[] = [ id: "issueTogether", question: "Do you agree with the statement below?", description: "“My partner and I can talk about any issue together“", + backgroundImage: "/lovely_bedroom.png", answers: [ { id: "strongly_agree", diff --git a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx index b3a5d5a..93ef330 100644 --- a/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/index.tsx @@ -14,6 +14,7 @@ function HyperPersonalizedAstrologyPage() { return (
+
* { + z-index: 1; } .header-title { @@ -53,4 +58,14 @@ .button { margin-top: 50px; } - \ No newline at end of file + +.background_wrap { + z-index: 0; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-size: cover; + background-image: url("/hyperPersonalizedAstrology.png"); +} \ No newline at end of file diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx index 9ec0ac5..cf78572 100644 --- a/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/Onboarding/index.tsx @@ -51,25 +51,27 @@ function OnboardingPage() { return (
- Leo + Leo {onboardingTitles[activeIndexTitle] && ( {onboardingTitles[activeIndexTitle]} )} -
- - Personality ... - -

{progress}%

-
- +
+
+ + Personality ... + +

{progress}%

+
+ +
); } diff --git a/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css b/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css index 7fa8d7c..dc240e5 100644 --- a/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/Onboarding/styles.module.css @@ -1,17 +1,21 @@ .page { - display: flex; - align-items: center; + display: grid; + justify-items: center; + align-items: end; + grid-template-rows: min-content min-content 1fr; height: fit-content; min-height: 100vh; min-height: 100dvh; background: #0F1323; width: 100%; max-width: 460px; - padding: 15px 40px; + padding: 15px 40px calc(0dvh + 63px); } .image { - margin-top: calc(50dvh - 200px); + margin-top: 100px; + width: 100%; + max-width: 273px; } .title { @@ -21,12 +25,9 @@ font-size: 32px; opacity: 0; transition: opacity 1s; - font-weight: 400; - margin-top: 20px; - /* animation-name: show-up; - animation-duration: 5s; - animation-iteration-count: infinite; - animation-timing-function: linear; */ + font-weight: bold; + margin-top: -10px; + white-space: pre-wrap; } .to-transparent { @@ -40,20 +41,15 @@ .progress-bar__container { background-color: #ACDCFF; height: 9px; - position: fixed; - bottom: calc(0dvh + 63px); - max-width: 312px; } .progress-bar__text-container { - position: fixed; - bottom: calc(0dvh + 77px); width: 100%; - max-width: 297px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; + padding: 0 12px; } .progress-bar__text-container * { @@ -65,6 +61,14 @@ width: fit-content; } +.footer { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; +} + @keyframes show-up { 0% { opacity: 0; diff --git a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx index ad5b088..357c94c 100644 --- a/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx +++ b/src/components/pages/ABDesign/v1/pages/PartnerRightPlace/index.tsx @@ -33,7 +33,7 @@ function PartnerRightPlacePage() { />
- The darts + The darts
diff --git a/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css b/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css index 65e0779..024b8d2 100644 --- a/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css +++ b/src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css @@ -2,11 +2,6 @@ position: relative; height: fit-content; min-height: 100dvh; - display: flex; - justify-content: start; - align-items: center; - flex-direction: column; - gap: 40px; background-position-y: top; background-position-x: center; background-repeat: no-repeat; @@ -16,6 +11,12 @@ background-color: #0F1323; width: 100%; max-width: 460px; + background-image: url(/satisfied-yes.png); + display: grid; + justify-content: center; + justify-items: center; + grid-template-rows: min-content 1fr min-content min-content; + padding-bottom: calc(0dvh + 160px); } .title { @@ -54,6 +55,7 @@ justify-content: center; align-items: center; gap: 10px; + margin-top: 30px; } .button { diff --git a/src/components/pages/ABDesign/v1/ui/BackgroundTopBlob/index.tsx b/src/components/pages/ABDesign/v1/ui/BackgroundTopBlob/index.tsx index fd35d9b..d13eb09 100644 --- a/src/components/pages/ABDesign/v1/ui/BackgroundTopBlob/index.tsx +++ b/src/components/pages/ABDesign/v1/ui/BackgroundTopBlob/index.tsx @@ -1,10 +1,13 @@ -import { useCallback } from "react"; +import { useCallback, useMemo } from "react"; interface IBackgroundTopBlobProps { width: number; height?: number; className?: string; fillPath?: string; + cRight?: string; + cLeft?: string; + cLeftStartX?: number; } function BackgroundTopBlob({ @@ -12,16 +15,29 @@ function BackgroundTopBlob({ height = 256, className = "", fillPath = "white", + cRight, + cLeft, + cLeftStartX = 100, }: IBackgroundTopBlobProps) { + const _cRight = useMemo(() => { + return cRight?.length + ? cRight + : `C ${width - 2.728} ${height - 65.035} ${width - 46.795} ${ + height - 107.293 + } ${width - 101.394} ${height - 107.293}`; + }, [cRight, height, width]); + + const _cLeft = useMemo(() => { + return cLeft?.length + ? cLeft + : `C 44.7715 ${height - 107.293} 0 ${height - 152.065} 0 ${ + height - 207.2934 + }`; + }, [cLeft, height]); + const getLinesPath = useCallback(() => { - return `M 0 0 H ${width} V ${height} L ${width - 0.482} ${ - height - 11.484 - } C ${width - 2.728} ${height - 65.035} ${width - 46.795} ${ - height - 107.293 - } ${width - 101.394} ${height - 107.293} H 100 C 44.7715 ${ - height - 107.293 - } 0 ${height - 152.065} 0 ${height - 207.2934} V 0 Z`; - }, [height, width]); + return `M 0 0 H ${width} V ${height} ${_cRight} H ${cLeftStartX} ${_cLeft} V 0 Z`; + }, [_cLeft, _cRight, cLeftStartX, height, width]); return ( <svg diff --git a/src/index.css b/src/index.css index 8127ccf..c76daa7 100644 --- a/src/index.css +++ b/src/index.css @@ -246,3 +246,11 @@ textarea { .slick-disabled { opacity: 0.5 !important; } + +html { + -webkit-text-size-adjust: 100%; +} + +input, textarea { + font-size: 16px !important; +} \ No newline at end of file