From e05a4338745decf0cb1d39fe9ef83eb0e09f1b49 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Mon, 14 Aug 2023 01:03:30 +0400
Subject: [PATCH] feat: add free period info page

---
 src/components/FreePeriodInfoPage/index.tsx   | 22 +++++++++++++++++++
 .../FreePeriodInfoPage/styles.module.css      | 14 ++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/FreePeriodInfoPage/index.tsx
 create mode 100644 src/components/FreePeriodInfoPage/styles.module.css

diff --git a/src/components/FreePeriodInfoPage/index.tsx b/src/components/FreePeriodInfoPage/index.tsx
new file mode 100644
index 0000000..afea2f7
--- /dev/null
+++ b/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
diff --git a/src/components/FreePeriodInfoPage/styles.module.css b/src/components/FreePeriodInfoPage/styles.module.css
new file mode 100644
index 0000000..94f2839
--- /dev/null
+++ b/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;
+}
\ No newline at end of file