diff --git a/package.json b/package.json index 889ad0c..4c333e1 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc && vite build", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index f61ab82..510f1a3 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -5,7 +5,7 @@ import { import { useAuth } from '../../auth' import { useSelector } from 'react-redux' import { selectors } from '../../store' -import routes, { hasNavigation, getRouteBy } from '../../routes' +import routes, { hasNavigation, getRouteBy, hasNoFooter } from '../../routes' import BirthdayPage from '../BirthdayPage' import BirthtimePage from '../BirthtimePage' import CreateProfilePage from '../CreateProfilePage' @@ -19,6 +19,10 @@ import Header from '../Header' import Navbar from '../Navbar' import Footer from '../Footer' import './styles.css' +import DidYouKnowPage from '../DidYouKnowPage' +import FreePeriodInfoPage from '../FreePeriodInfoPage' +import AttentionPage from '../AttentionPage' +import FeedbackPage from '../FeedbackPage' function App(): JSX.Element { return ( @@ -26,6 +30,10 @@ function App(): JSX.Element { }> } /> } /> + } /> + } /> + } /> + } /> } /> } /> } /> @@ -44,12 +52,13 @@ function App(): JSX.Element { function Layout(): JSX.Element { const location = useLocation() const showNavbar = hasNavigation(location.pathname) + const showFooter = hasNoFooter(location.pathname) const [isMenuOpen, setIsMenuOpen] = useState(false) return (
setIsMenuOpen(true)}/>
-
+ { showFooter ?
: null } { showNavbar ? setIsMenuOpen(false)} /> : null}
) diff --git a/src/components/DidYouKnowPage/index.tsx b/src/components/DidYouKnowPage/index.tsx new file mode 100644 index 0000000..e2eb4b6 --- /dev/null +++ b/src/components/DidYouKnowPage/index.tsx @@ -0,0 +1,37 @@ +import { useNavigate } from 'react-router-dom' +import { useTranslation } from 'react-i18next' +import MainButton from '../MainButton' +import Title from '../Title' +import routes from '../../routes' +import styles from './styles.module.css' +import { useSelector } from 'react-redux' +import { selectors } from '../../store' +import { getZodiacSignByDate } from '../../zodiac-sign' + +function DidYouKnowPage(): JSX.Element { + const { t } = useTranslation() + const navigate = useNavigate() + const handleNext = () => navigate(routes.client.freePeriodInfo()) + const birthdate = useSelector(selectors.selectBirthdate) + const zodiacSign = getZodiacSignByDate(birthdate) + + + return ( +
+
+ {t('did_you_know')} +

+ {t('zodiac_sign_info', { zodiacSign })} +

+
+
+ + {t('learn_about_my_energy')} + + {t('skip_for_now')} +
+
+ ) +} + +export default DidYouKnowPage diff --git a/src/components/DidYouKnowPage/styles.module.css b/src/components/DidYouKnowPage/styles.module.css new file mode 100644 index 0000000..bf6b5e6 --- /dev/null +++ b/src/components/DidYouKnowPage/styles.module.css @@ -0,0 +1,36 @@ +.page { + position: relative; + height: calc(100vh - 50px); + max-height: -webkit-fill-available; + flex: auto; + justify-content: center; + display: grid; + grid-template-rows: 1fr 96px; + justify-items: center; +} + +.content { + text-align: center; + +} + +.zodiacInfo { + font-weight: 500; + line-height: 1.2; +} + +.footer { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + gap: 18px; +} + +.skip { + color: gray; + font-weight: 500; + border-bottom: 1px solid gray; + padding-bottom: 1px; + cursor: pointer; +} \ No newline at end of file diff --git a/src/locales/dev.ts b/src/locales/dev.ts index 422bc95..1d1bbcf 100644 --- a/src/locales/dev.ts +++ b/src/locales/dev.ts @@ -49,5 +49,18 @@ export default { any_dificulties: "If you have any difficulties with solving this problem, do not hesitate to contact ", our_support: "our support", try_again: "Try again", + did_you_know: "Did you Know?", + zodiac_sign_info: "According to the study, 85% of people with your Zodiac sign, , experience financial difficulties due to a loss of sexual energy.", + learn_about_my_energy: "Learn about my energy", + skip_for_now: "Skip for now", + free_period_info: "You won't be charged until after your free trial. Cancel anytime.", + money_energy: "MONEY energy", + sexual_energy: "SEXUAL energy", + black_energy: "BLACK energy", + relations_energy: "RELATIONS energy", + attention: "Attention!", + attention_page_text: "There are significant deviations in your energy, this is a fairly rare occurrence and few people have encountered something like this. Therefore, we cannot provide you with a full report as you may not be prepared for this.", + not_ready_for_information: "I understand that I may not be ready for this information.", + feedback: "I couldn`t believe me eyes when I saw what was revealed about my energy; it was truly shocking. Everything that was mentioned really happened in my life, and I understood the reasons and especially who was behind it. Everything was very beneficial and spot on, without any excess or unnecessary details. Thanks for the assistance; this analysis greatly helped me in my life. I recommend it to everyone. Special thanks to Aura!", }, } diff --git a/src/routes.ts b/src/routes.ts index 28312e3..f8fad5b 100644 --- a/src/routes.ts +++ b/src/routes.ts @@ -8,10 +8,14 @@ const routes = { client: { root: () => [host, ''].join('/'), birthday: () => [host, 'birthday'].join('/'), + didYouKnow: () => [host, 'did-you-know'].join('/'), + freePeriodInfo: () => [host, 'free-period'].join('/'), birthtime: () => [host, 'birthtime'].join('/'), emailEnter: () => [host, 'email'].join('/'), subscription: () => [host, 'subscription'].join('/'), createProfile: () => [host, 'profile', 'create'].join('/'), + attention: () => [host, 'attention'].join('/'), + feedback: () => [host, 'feedback'].join('/'), paymentMethod: () => [host, 'payment', 'method'].join('/'), wallpaper: () => [host, 'wallpaper'].join('/'), static: () => [host, 'static', ':typeId'].join('/'), @@ -41,6 +45,9 @@ export const entrypoints = [ routes.client.birthday(), routes.client.subscription(), routes.client.wallpaper(), + routes.client.didYouKnow(), + routes.client.attention(), + routes.client.feedback(), ] export const isEntrypoint = (path: string) => entrypoints.includes(path) export const isNotEntrypoint = (path: string) => !isEntrypoint(path) @@ -48,6 +55,15 @@ export const withNavigationRoutes = [routes.client.wallpaper()] export const hasNavigation = (path: string) => withNavigationRoutes.includes(path) export const hasNoNavigation = (path: string) => !hasNavigation(path) +export const withoutFooterRoutes = [ + routes.client.didYouKnow(), + routes.client.freePeriodInfo(), + routes.client.createProfile(), + routes.client.attention(), + routes.client.feedback(), +] +export const hasNoFooter = (path: string) => !withoutFooterRoutes.includes(path) + export const getRouteBy = (status: UserStatus): string => { switch (status) { case 'lead':