feat: add home page (#35)

* feat: add home page

develop mobile and desktop homepage

* feat: review home page

review alecell comments to approve the pull request

* fix: add missing logo in desktop

* refactor: minor refactor

* refactor: change components names

* refactor: minor changes in icons

---------

Co-authored-by: Andre Almeida <andre-silva78@hotmail.com>

.eslintrc.json

@@ -1,11 +1,9 @@
 {
   "extends": ["airbnb-base"],
-  "plugins": ["prettier"],
   "env": {
     "browser": true
   },
   "rules": {
-    "prettier/prettier": ["error", { "endOfLine": "auto" }],
     "no-console": "warn",
     "object-curly-newline": "off"
   }

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "useTabs": false,
   "tabWidth": 2,
   "semi": true,

src/components/TextInput/index.scss

@@ -12,7 +12,7 @@
 
     &.standard {
       padding: 0.65rem 1rem;
-      border: 1px solid #a3a3a3;
+      border: 1px solid rgb(163, 163, 163);
 
       border-radius: 8px;
 
@@ -31,41 +31,41 @@
       }
 
       &:focus {
-        border-color: #007bff;
+        border-color: rgb(0, 123, 255);
 
         filter: opacity(1);
-        outline-color: #007bff;
+        outline-color: rgb(0, 123, 255);
       }
 
       &.input-error {
-        border-color: #dc3545;
+        border-color: rgb(220, 53, 69);
 
-        background-color: #ee727e75;
+        background-color: rgba(238, 114, 126, 0.458);
         filter: opacity(0.75);
-        outline-color: #dc3545;
+        outline-color: rgb(220, 53, 69);
       }
     }
 
     &.outlined {
       padding: 0.5rem 0.35rem;
-      border-bottom: 2px solid #bfbfbf;
+      border-bottom: 2px solid rgb(191, 191, 191);
       border-color: transparent;
 
       outline: none;
 
       transition: border-color 0.3s ease-in-out;
 
       &:focus {
-        border-bottom-color: #007bff;
+        border-bottom-color: rgb(0, 123, 255);
       }
 
       &.input-error {
-        border-bottom-color: #dc3545;
+        border-bottom-color: rgb(220, 53, 69);
 
         filter: opacity(0.65);
 
         &::placeholder {
-          color: #dc3545;
+          color: rgb(220, 53, 69);
         }
       }
 

src/components/button/index.js

@@ -0,0 +1,45 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['click'];
+
+const html = `
+    <button data-select="button" class="button" type="button"></button>
+`;
+
+export default function Button({ text = '', isFullWidth = false }) {
+  Component.call(this, { html, events });
+
+  this.setText(text);
+  this.setIsFullWidth(isFullWidth);
+
+  const $button = this.selected.get('button');
+  $button.addEventListener('click', () => {
+    this.click();
+  });
+}
+
+Button.prototype = Object.assign(Button.prototype, Component.prototype, {
+  getText() {
+    return this.selected.get('button').textContent;
+  },
+
+  setText(text = '') {
+    this.selected.get('button').textContent = text;
+    this.emit('text:change', text);
+  },
+
+  isFullWidth() {
+    return this.selected.get('button').classList.has('button--block');
+  },
+
+  setIsFullWidth(isFullWidth = false) {
+    const { classList } = this.selected.get('button');
+    if (isFullWidth) classList.add('button--block');
+    else classList.remove('button--block');
+  },
+
+  click() {
+    this.emit('click');
+  },
+});

src/components/button/index.scss

@@ -0,0 +1,21 @@
+@use '~styles/colors.scss' as colors;
+
+.button {
+  font-family: 'Noto Sans', sans-serif;
+  color: rgb(255, 255, 255);
+  font-size: 1.6rem;
+  font-weight: 500;
+
+  padding: 1.6rem;
+  border: unset;
+
+  background-color: colors.$blue500;
+  border-radius: 1.4rem;
+  appearance: none;
+
+  &--block {
+    width: 100%;
+
+    display: block;
+  }
+}

src/home/components/NoPetRegirestedPage/index.js

@@ -0,0 +1,37 @@
+import { Component } from 'pet-dex-utilities';
+import Button from '../../../components/button';
+import petUrl from './images/no-pet-regirested-page.png';
+import './index.scss';
+
+const html = `
+  <div data-select="container" class="no-pet-regirested-page">
+    <div class="no-pet-regirested-page__content">
+      <div class="no-pet-regirested-page__description">
+        <h1 class="no-pet-regirested-page__title">Você ainda não tem nenhum pet cadastrado</h1>
+        <p class="no-pet-regirested-page__hint">Crie o perfil do seu pet e deixe o nosso site com o focinho do seu filhote!</p>
+      </div>
+      <img class="no-pet-regirested-page__image" src="${petUrl}" alt="dog in an smart phone" />
+    </div>
+  </div>;
+`;
+
+export default function NoPetRegirestedPage() {
+  Component.call(this, { html });
+
+  const $container = this.selected.get('container');
+
+  this.button = new Button({
+    text: 'Cadastrar pet',
+    isFullWidth: true,
+  });
+
+  this.button.selected
+    .get('button')
+    .classList.add('no-pet-regirested-page__button');
+  this.button.mount($container);
+}
+
+NoPetRegirestedPage.prototype = Object.assign(
+  NoPetRegirestedPage.prototype,
+  Component.prototype,
+);

src/home/components/NoPetRegirestedPage/index.scss

@@ -0,0 +1,80 @@
+@use '~styles/colors.scss' as colors;
+@use '~styles/breakpoints.scss' as breakpoints;
+
+.no-pet-regirested-page {
+  min-height: 100%;
+
+  display: grid;
+
+  place-items: center;
+
+  &__description {
+    max-width: 33.5rem;
+
+    font-family: 'Montserrat', sans-serif;
+  }
+
+  &__title {
+    color: colors.$gray800;
+    font-size: 2.4rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  &__hint {
+    color: colors.$gray600;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 1.875;
+
+    margin-top: 1.8rem;
+  }
+
+  &__image {
+    max-width: 100%;
+
+    margin-top: 2.4rem;
+  }
+
+  &__button {
+    max-width: 42rem;
+
+    margin-top: 3.2rem;
+  }
+
+  &__content {
+    text-align: center;
+  }
+}
+
+@include breakpoints.from1024 {
+  .no-pet-regirested-page {
+    &__description {
+      max-width: 46rem;
+    }
+
+    &__title {
+      font-size: 3.4rem;
+    }
+
+    &__hint {
+      font-size: 1.8rem;
+
+      margin-top: 2rem;
+    }
+
+    &__image {
+      margin-top: 0;
+    }
+
+    &__button {
+      margin-top: 4rem;
+    }
+
+    &__content {
+      display: flex;
+
+      align-items: center;
+    }
+  }
+}

src/home/components/SideMenu/index.js

@@ -0,0 +1,17 @@
+import { Component } from 'pet-dex-utilities';
+import petUrl from '../../images/pet-dex.svg';
+import './index.scss';
+
+const html = `
+  <div class="side-menu">
+    <figure class="side-menu__logo-container">
+      <img class="side-menu__logo" src="${petUrl}" alt="pet-dex logo" />
+    </figure>
+  </div>
+`;
+
+export default function SideMenu() {
+  Component.call(this, { html });
+}
+
+SideMenu.prototype = Object.assign(SideMenu.prototype, Component.prototype);

src/home/components/SideMenu/index.scss

@@ -0,0 +1,11 @@
+.side-menu {
+  &__logo-container {
+    padding-block: 4rem 2rem;
+
+    text-align: center;
+  }
+
+  &__logo {
+    max-width: 100%;
+  }
+}

src/home/components/navigation/index.js

@@ -0,0 +1,36 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+import petUrl from '../../images/pet-dex.svg';
+import avatarUrl from './images/avatar.svg';
+import bellUrl from './images/bell.svg';
+import exitUrl from './images/exit.svg';
+import menuUrl from './images/menu.svg';
+
+const html = `
+  <div class="navigation">
+    <figure>
+      <img class="navigation__logo" src="${petUrl}" alt="pet-dex logo" />
+    </figure>
+    <div class="navigation__icons">
+      <figure class="navigation__icon-container navigation__icon-container--menu">
+        <img class="navigation__icon" src="${menuUrl}" alt="menu" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--bell">
+        <img class="navigation__icon" src="${bellUrl}" alt="notifications" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--avatar">
+        <img class="navigation__icon" src="${avatarUrl}" alt="user avatar" />
+      </figure>
+      <figure class="navigation__icon-container navigation__icon-container--exit">
+        <img class="navigation__icon" src="${exitUrl}" alt="exit button" />
+      </figure>
+    </div>
+  </div>
+`;
+
+export default function Navigation() {
+  Component.call(this, { html });
+}
+
+Navigation.prototype = Object.assign(Navigation.prototype, Component.prototype);