feat: Add Did you know page

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"

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 {
       <Route element={<Layout />}>
         <Route path={routes.client.root()} element={<MainPage />} />
         <Route path={routes.client.birthday()} element={<BirthdayPage />} />
+        <Route path={routes.client.didYouKnow()} element={<DidYouKnowPage />} />
+        <Route path={routes.client.freePeriodInfo()} element={<FreePeriodInfoPage />} />
+        <Route path={routes.client.attention()} element={<AttentionPage />} />
+        <Route path={routes.client.feedback()} element={<FeedbackPage />} />
         <Route path={routes.client.birthtime()} element={<BirthtimePage />} />
         <Route path={routes.client.createProfile()} element={<SkipStep />} />
         <Route path={routes.client.emailEnter()} element={<EmailEnterPage />} />
@@ -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<boolean>(false)
   return (
     <div className='container'>
       <Header openMenu={() => setIsMenuOpen(true)}/>
       <main className='content'><Outlet /></main>
-      <Footer color={showNavbar ? 'black' : 'white'}/>
+      { showFooter ? <Footer color={showNavbar ? 'black' : 'white'}/> : null }
       { showNavbar ? <Navbar isOpen={isMenuOpen} closeMenu={() => setIsMenuOpen(false)} /> : null}
     </div>
   )

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 (
+    <section className={`${styles.page} page`}>
+      <div className={styles.content}>
+        <Title variant='h1'>{t('did_you_know')}</Title>
+        <p className={styles.zodiacInfo}>
+            {t('zodiac_sign_info', { zodiacSign })}
+        </p>
+      </div>
+      <footer className={styles.footer}>
+        <MainButton onClick={handleNext}>
+            {t('learn_about_my_energy')}
+        </MainButton>
+        <span className={styles.skip}>{t('skip_for_now')}</span>
+      </footer>
+    </section>
+  )
+}
+
+export default DidYouKnowPage

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;
+}

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 <supportLink>",
     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, <zodiacSign>, 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!",
   },
 }

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':