feat: add free period info page

src/components/FreePeriodInfoPage/index.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Title from '../Title'
+import routes from '../../routes'
+import styles from './styles.module.css'
+
+function FreePeriodInfoPage(): JSX.Element {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const handleNext = () => navigate(routes.client.createProfile())
+
+  return (
+    <section className={`${styles.page} page`} onClick={handleNext}>
+      <div className={styles.content}>
+        <Title variant='h4' style={{color: 'white', fontWeight: 500}}>{t('free_period_info')}</Title>
+      </div>
+      {/* <img src="/goosebumps-aura.png" alt="Aura" /> */}
+    </section>
+  )
+}
+
+export default FreePeriodInfoPage

src/components/FreePeriodInfoPage/styles.module.css

@@ -0,0 +1,14 @@
+.page {
+    background-color: #000;
+    height: calc(100vh - 50px);
+    flex: auto;
+    padding-top: 22%;
+    background-image: url('/goosebumps-aura-click-icon-animation.png');
+    background-size: 100%;
+    background-position: center 0;
+    background-repeat: no-repeat;
+}
+
+.content {
+    text-align: center;
+}