create new footer (#231)

* create new footer

* fix: padding on mobile version

* fix: add waves

* fix: mobile footer padding

* fix: alter order of companies

assets/css/app.scss

@@ -96,7 +96,7 @@ nav {
 
 main {
   grid-area: content;
-  margin-bottom: 100px;
+  /* margin-bottom: 100px; */
 }
 
 footer {

assets/css/footer.scss

@@ -1,25 +1,79 @@
 footer {
   @apply fixed bottom-0 z-10 w-full;
 
-  div {
-    @apply absolute flex flex-wrap items-center justify-center bg-white-100;
-    gap: 2rem;
-    padding: 1.5rem 1rem;
-
-    box-shadow: 0px 0px 20px 2px rgba(64, 64, 64, 0.10);
-
-    p {
-      text-align: center;
-      font-size: 0.75rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 1.25rem;
+  img {
+    width: 100%;
+  }
+
+  .blocks {
+    @apply flex bg-white-100;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.875rem 2.5rem;
+
+    .block {
+      @apply flex flex-col;
+      align-items: flex-start;
+      gap: 0.625rem;
+
+      p {
+        max-width: 20.375rem;
+      }
+
+      .block-tag {
+        @apply bg-blue-100;
+        padding: 0.25rem;
+        justify-content: center;
+        align-items: center;
+        border-radius: 0.125rem;
+      }
+
+      .block-image {
+        @apply flex flex-row;
+        gap: 1rem;
+
+        img {
+          height: 2rem;
+        }
+      }
     }
   }
-}
 
-@media (max-width: 767px) {
-  footer {
-    @apply absolute;
+  .divider {
+    border: none;
+    border-left: 1px solid #cce0f4;
+    width: 1px;
+    height: 2rem;
+  }
+
+  @media (max-width: 767px) {
+    @apply relative;
+    padding: 2.5rem 1rem;
+
+    .blocks {
+      @apply flex flex-col;
+      gap: 1.5rem;
+
+      .block {
+        @apply flex;
+        align-items: center;
+        gap: 1rem;
+
+        .block-image {
+          @apply flex flex-col;
+        }
+
+        .block-text {
+          text-align: center;
+        }
+      }
+
+      .divider {
+        border: none;
+        border-top: 1px solid #cce0f4;
+        width: 100%;
+        height: 1px;
+      }
+    }
   }
-}
+}

lib/pescarte_web/design_system.ex

@@ -155,15 +155,50 @@ defmodule PescarteWeb.DesignSystem do
   def footer(assigns) do
     ~H"""
     <footer>
-      <img class="hidden md:flex" src={~p"/images/footer_logos_reduced_height.png"} />
-      <div class="md:hidden">
-        <img src={~p"/images/footer/logo_ibama.svg"} />
-        <img src={~p"/images/footer/logo_uenf.svg"} />
-        <img src={~p"/images/footer/logo_petrobras.svg"} />
-        <img src={~p"/images/footer/logo_ipead.svg"} />
-        <.text size="base" color="text-blue-100">
-          A realização do Projeto Pescarte é uma medida de mitigação exigida pelo licenciamento ambiental federal, conduzido pelo IBAMA.
-        </.text>
+      <img class="hidden md:flex waves" src={~p"/images/footer/waves.svg"} />
+      <div class="blocks">
+        <div class="block">
+          <.text size="base" color="text-white-100" class="block-tag">
+            Projeto de Educação Ambiental
+          </.text>
+          <div class="block-image">
+            <img src={~p"/images/pescarte_logo.svg"} />
+          </div>
+        </div>
+        <div class="divider"></div>
+        <div class="block">
+          <.text size="base" color="text-white-100" class="block-tag">
+            Execução
+          </.text>
+          <div class="block-image">
+            <img src={~p"/images/footer/logo_ipead.svg"} />
+            <img src={~p"/images/footer/logo_uenf.svg"} />
+          </div>
+        </div>
+        <div class="divider"></div>
+        <div class="block">
+          <.text size="base" color="text-white-100" class="block-tag">
+            Empreendedor
+          </.text>
+          <div class="block-image">
+            <img src={~p"/images/footer/logo_petrobras.svg"} />
+          </div>
+        </div>
+        <div class="divider"></div>
+        <div class="block">
+          <.text size="base" color="text-white-100" class="block-tag">
+            Órgão Licenciador
+          </.text>
+          <div class="block-image">
+            <img src={~p"/images/footer/logo_ibama.svg"} />
+          </div>
+        </div>
+        <div class="divider"></div>
+        <div class="block">
+          <.text size="base" color="text-blue-100" class="block-text">
+            A realização do Projeto Pescarte é uma medida de mitigação exigida pelo licenciamento ambiental federal, conduzido pelo IBAMA.
+          </.text>
+        </div>
       </div>
     </footer>
     """