🎨 style(ui/ux): ajusta layout do join us (#288)

modules/home/src/lib/join-us/default.scss

@@ -1,20 +1,34 @@
 @import './../../../../../src/scss/tokens/colors/token';
+@import './../../../../../src/scss/tokens/typography/token';
 
 :host section.default {
   display: grid;
   grid-template-columns: 2fr 1fr;
+  grid-template-rows: 1.5rem auto;
   margin: 0 auto;
   gap: 1rem;
   max-width: 76rem;
   height: max-content;
 
-  p {
-    text-align: justify;
+  h2 {
+    font-weight: $font-weight-bold;
   }
 
-  button {
-    background-color: #feca57;
-    border-radius: 0.5rem;
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    p {
+      margin-bottom: 1rem;
+      text-align: justify;
+      color: $color-button-secondary-border;
+    }
+
+    .container-button {
+      width: 100%;
+      display: flex;
+    }
   }
 
   img {
@@ -23,23 +37,4 @@
     max-width: 100%;
     height: auto;
   }
-
-  @media (min-width: 600px) and (max-width: 698px) {
-    grid-template-rows: 2rem 7rem 3rem;
-  }
-
-  @media (min-width: 699px) and (max-width: 843px) {
-    grid-template-rows: 2rem 6rem 3rem;
-  }
-
-  @media (min-width: 844px) and (max-width: 1102px) {
-    grid-template-rows: 2rem 5rem 3rem;
-  }
-
-  @media (min-width: 1103px) {
-    grid-template-rows: 2rem 4rem 3rem;
-  }
-}
-.mat-mdc-raised-button.text-black:not(:disabled) {
-  color: $color-button-primary-text;
 }

modules/home/src/lib/join-us/handset-portrait.scss

@@ -1,3 +1,6 @@
+@import './../../../../../src/scss/tokens/colors/token';
+@import './../../../../../src/scss/tokens/typography/token';
+
 :host section.handset-portrait {
   display: flex;
   flex-direction: column;
@@ -6,15 +9,29 @@
   max-width: 76rem;
   gap: 1rem;
 
-  p {
-    order: 3;
+  h2 {
+    font-weight: $font-weight-bold;
+    margin: 0;
+    order: 1;
   }
 
-  button {
-    align-self: flex-end;
-    background-color: #feca57;
-    border-radius: 0.5rem;
-    order: 4;
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    order: 3;
+
+    p {
+      margin: 0;
+      color: $color-button-secondary-border;
+    }
+
+    .container-button {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 16px;
+    }
   }
 
   img {

modules/home/src/lib/join-us/join-us.component.html

@@ -5,20 +5,20 @@
   "
 >
   <h2>{{ joinUs.title }}</h2>
-  <p>
-    {{ joinUs.text }}
-  </p>
-  <button
-    mat-raised-button
-    class="text-black"
-    color="primary"
-    style="width: 30%"
-    (click)="learnMore()"
-  >
-    {{ joinUs.button }}
-  </button>
+
+  <section class="info">
+    <p>
+      {{ joinUs.text }}
+    </p>
+
+    <div class="container-button">
+      <button class="btn-primary" (click)="learnMore()">
+        {{ joinUs.button }}
+      </button>
+    </div>
+  </section>
+
   <img
-    class="pb-1rem"
     [ngSrc]="joinUs.imgSrc"
     [alt]="joinUs.alternativeText"
     [width]="magicNumber.FOUR_HUNDRED"

modules/home/src/lib/join-us/join-us.constants.ts

@@ -8,10 +8,10 @@ type joinUs = {
 
 export const JOIN_US = {
   title: 'Filie-se',
-  text: 'Junte-se a nós e fortaleça a luta pelos direitos das pessoas com deficiência visual no Pará! Ao se filiar à nossa associação, você contribuirá para ampliar o acesso a oportunidades de inclusão, educação e suporte para a comunidade de cegos. Faça parte dessa rede e ajude a construir um futuro mais acessível para todos.',
+  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet purus gravida quis blandit. Id volutpat lacus laoreet non curabitur. Nunc scelerisque viverra mauris in aliquam sem fringilla. Cursus vitae congue mauris rhoncus aenean. Ornare lectus sit amet est placerat. Tortor at risus viverra adipiscing at in tellus integer. Pretium quam vulputate dignissim suspendisse. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue eget arcu dictum varius. Massa id neque aliquam vestibulum. Sed risus ultricies tristique nulla.',
   imgSrc: 'joinus.png',
   alternativeText: 'Foto de equipe da família ASCEPA',
-  button: 'Saiba mais',
+  button: 'Saiba como',
 } as joinUs;
 
 export const MAGIC_NUMBERS = {