feat: cria pagina de login issue #240

src/layouts/app/pages/Login/index.js

@@ -0,0 +1,34 @@
+import { Component } from 'pet-dex-utilities';
+import LoginForm from '../../../../components/LoginForm';
+import petdexLogo from './images/petdex-logo__login-page.png';
+import petAndDog from './images/pet-and-dog__login-page.png';
+import './index.scss';
+
+const html = `
+   <div data-select="container" class="login-page">
+            <div class="login-page__img-box">
+                        <div class="login-page__img-top"> 
+                              <img src="${petdexLogo}" class="login-page__img-logopetdex"/>
+                        </div>
+                        <div class="login-page__img-down">
+                              <img src="${petAndDog}" class="login-page__img-petanddog"/>
+                        </div>
+
+            </div>
+            <div class=login-page__login-box>
+
+                  <div class="login-page__login-form">
+                  </div>
+            </div>
+
+    </div>
+`;
+export default function LoginPage() {
+  Component.call(this, { html });
+
+  const $container = this.selected.get('container');
+  this.LoginForm = new LoginForm();
+  this.LoginForm.mount($container);
+}
+
+LoginPage.prototype = Object.assign(LoginPage.prototype, Component.prototype);

src/layouts/app/pages/Login/index.scss

@@ -0,0 +1,38 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.login-page {
+  width: 100%;
+
+  display: flex;
+  gap: 5rem;
+
+  justify-content: center;
+
+  padding: 15rem;
+
+  background-color: colors.$primary600;
+}
+
+.login-page__img-box {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.login-page__img-box img {
+  display: block;
+
+  padding-right: 2rem;
+}
+
+.login-page__img-logopetdex {
+  width: 15.5rem;
+}
+
+.login-page__img-top {
+  width: 100%;
+
+  margin-bottom: 10rem;
+}

src/stories/Login.stories.js

@@ -0,0 +1,15 @@
+import LoginPage from '../layouts/app/pages/Login';
+
+export default {
+  title: 'Pages/Login',
+  render: () => {
+    const loginPage = new LoginPage();
+    const $container = document.createElement('div');
+
+    loginPage.mount($container);
+
+    return $container;
+  },
+};
+
+export const LoginPageStoryPage = {};