slice confirm email page and slavica header

apps/app/src/components/RegistrationForms/ConfirmEmail/ConfirmEmail.module.scss

@@ -0,0 +1,28 @@
+.confirmEmail {
+    display: flex;
+    flex-direction: column;
+    width: 422px;
+
+    .confirmEmailUpper {
+
+        margin-bottom: 48px;
+
+        h2{
+            color: $primary-black;
+            text-align: center;
+            font-family: NeueMachina;
+            font-size: 30px;
+            font-weight: 500;
+            line-height: 30px; 
+            margin-top: 40px;
+            margin-bottom: 18px;
+        }
+
+        p{
+            color: $primary-black;
+            text-align: center;
+            font-family: Inter;
+            line-height: 22px; /* 137.5% */
+        }
+    }
+}

apps/app/src/components/RegistrationForms/ConfirmEmail/ConfirmEmail.tsx

@@ -0,0 +1,19 @@
+import Button from '../../Button/Button';
+import c from './ConfirmEmail.module.scss';
+
+export const ConfirmEmail = () => {
+  return (
+    <div className={c.confirmEmail}>
+      <div className={c.confirmEmailUpper}>
+        <h2>Potvrdi svoj e-mail</h2>
+        <p>
+          Poslali smo ti e-mail na [email protected] da potvrdimo ispravnost
+          unesene adrese. Nakon što se e-mail pojavi u tvom sandučiću, klikni na
+          link kako bi registracija bila uspješna.
+        </p>
+      </div>
+
+      <Button children='Potvrdi email' variant='orange' />
+    </div>
+  );
+};

apps/app/src/components/RegistrationForms/ConfirmEmail/index.ts

@@ -0,0 +1,2 @@
+import { ConfirmEmail } from './ConfirmEmail';
+export { ConfirmEmail };

apps/app/src/components/RegistrationForms/SlavicaHeader/SlavicaHeader.module.scss

@@ -0,0 +1,38 @@
+.slavicaHeader{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 80px;
+
+    @media (max-width: $breakpoint-tablet) {
+        padding-top: 64px;
+    }
+
+    h1{
+        color: $primary-white;
+        text-align: center;
+        font-family: NeueMachina;
+        font-size: 30px;
+        font-weight: 500;
+        line-height: 30px; 
+        display: flex;
+        width: 100%;
+        justify-content: center;
+
+        @media (max-width: $breakpoint-tablet) {
+            justify-content: flex-start;
+            padding-left: 24px;
+        }
+    }
+
+    @media (max-width: $breakpoint-tablet) {
+        height: 350px;
+        align-items: flex-end;
+    }
+
+    img {
+        position: relative;
+        overflow: hidden;
+    }
+}

apps/app/src/components/RegistrationForms/SlavicaHeader/SlavicaHeader.tsx

@@ -0,0 +1,18 @@
+import { useDeviceType } from '../../../hooks/UseDeviceType';
+import c from './SlavicaHeader.module.scss';
+import mobileSlavica from './../../../assets/images/confirm-email-slavica-mobile.png';
+import desktopSlavica from './../../../assets/images/confirm-email-slavica-desktop.png';
+
+export const SlavicaHeader = () => {
+  const { isMobile } = useDeviceType({});
+  return (
+    <div className={c.slavicaHeader}>
+      <h1>Registracija</h1>
+      {isMobile ? (
+        <img src={mobileSlavica}></img>
+      ) : (
+        <img src={desktopSlavica}></img>
+      )}
+    </div>
+  );
+};

apps/app/src/components/RegistrationForms/SlavicaHeader/index.ts

@@ -0,0 +1,2 @@
+import { SlavicaHeader } from './SlavicaHeader';
+export { SlavicaHeader };

apps/app/src/pages/ConfirmEmailPage/ConfirmEmailPage.module.scss

@@ -0,0 +1,30 @@
+.page {
+    background-color: $primary-black;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+    //   width: 100%;
+    //   height: 300px; // Temporary 
+    //   display: flex;
+    //   justify-content: center;
+
+    //   @media (max-width: $breakpoint-tablet) {
+    //     height: 350px;
+    //     justify-content: flex-end;
+    //   }
+
+    }
+
+    .main {
+      width: 100%;
+      height: 100%;
+      background-color: $primary-background;
+      border-radius: 12px 12px 0px 0px;
+      display: flex;
+      justify-content: center;
+    }
+}
+

apps/app/src/pages/ConfirmEmailPage/ConfirmEmailPage.tsx

@@ -0,0 +1,20 @@
+import { ConfirmEmail } from '../../components/RegistrationForms/ConfirmEmail';
+import c from './ConfirmEmailPage.module.scss';
+import { useDeviceType } from '../../hooks/UseDeviceType';
+import { SlavicaHeader } from '../../components/RegistrationForms/SlavicaHeader';
+
+export const ConfirmEmailPage = () => {
+  const { isMobile } = useDeviceType({});
+  console.log(isMobile);
+
+  return (
+    <section className={c.page}>
+      <header className={c.header}>
+        <SlavicaHeader />
+      </header>
+      <main className={c.main}>
+        <ConfirmEmail />
+      </main>
+    </section>
+  );
+};

apps/app/src/router/Router.tsx

@@ -18,12 +18,14 @@ import { ShoppingPage } from '../pages/ShoppingPage';
 import { NavigationLayout } from '../layout';
 import Home from '../pages/Home';
 import TestPage from '../pages/TestPage/TestPage';
+import { ConfirmEmailPage } from '../pages/ConfirmEmailPage/ConfirmEmailPage';
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <React.Fragment>
       <Route path={RouteNames.LOGIN} element={<LoginPage />} />
       <Route path={RouteNames.REGISTER} element={<RegisterPage />} />
+      <Route path={RouteNames.CONFIRM_EMAIL} element={<ConfirmEmailPage />} />
       <Route path={RouteNames.PASSWORD_RESET} element={<PasswordResetPage />} />
       <Route element={<NavigationLayout />} errorElement={<>error</>}>
         <Route path={RouteNames.HOME} element={<Home />} />

apps/app/src/router/routes.ts

@@ -29,6 +29,7 @@ export enum RouteNames {
   SCHEDULE = '/app/schedule',
   FLY_TALKS = '/app/flyTalks',
   SHOPPING = '/app/shopping',
+  CONFIRM_EMAIL = '/app/confirm-email',
 }
 
 export interface SubMenu {