feat: add component 'nossas equipes' (#164)

* feat: add new template for sedes/equipes * feat: add style for new screen sedes/equipes * chore: add source .env.dev * feat: add component 'nossas equipes' --------- Co-authored-by: Zoey de Souza Pessanha <zoey.spessanha@zeetech.io>
peapescarte · Jun 5, 2024 · da74697 · da74697
1 parent eaa7869
commit da74697
Show file tree

Hide file tree

Showing 18 changed files with 486 additions and 7 deletions.
diff --git a/.envrc b/.envrc
@@ -8,6 +8,8 @@ export ERL_AFLAGS="-kernel shell_history enabled"
 
 export LANG=en_US.UTF-8
 
+source .env.dev
+
 use flake
 
 # Install mix dependencies

diff --git a/assets/css/landing.scss b/assets/css/landing.scss
@@ -314,4 +314,113 @@
       }
     }
   }
+}
+
+.equipes-wrapper {
+  @apply flex;
+  flex-direction: column;
+  margin-top: 5rem;
+
+  .nossas-sedes-wrapper {
+    @apply flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4.5rem;
+
+    .nossas-sedes-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 2.5rem;
+      padding: 0 7.188rem;
+      margin-bottom: 5rem;
+
+      .sede-detail {
+        @apply flex items-start gap-2.5;
+        gap: 0.625rem;
+
+        svg {
+          @apply text-black-80;
+          margin-top: 0.3rem;
+          width: 14px;
+          height: 14px;
+        }
+
+        .sede-text {
+          @apply flex;
+          flex-direction: column;
+
+          >h5 {
+            line-height: 1.5rem;
+          }
+
+          >h5:nth-child(1) {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+  }
+
+  .nossas-equipes-wrapper {
+    @apply flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3.5rem;
+
+    .nossas-equipes-container {
+      @apply flex relative;
+      flex-direction: column;
+      gap: 2rem;
+      padding: 0 2.5rem 0 2.5rem;
+      margin-bottom: 5rem;
+
+      .nossas-equipes-card {
+        @apply relative;
+
+        .nossas-equipes-content {
+          @apply flex absolute;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 1.5rem;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          text-align: center;
+
+          p {}
+
+          a,
+          div {
+            @apply flex text-white-100;
+            justify-content: center;
+            align-items: center;
+            width: 10.938rem;
+            height: 2.563rem;
+            font-size: 0.875rem;
+            background-color: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 4px;
+            cursor: pointer;
+          }
+        }
+      }
+
+      .nossas-equipes-content-collapsed {
+        @apply flex;
+        justify-content: center;
+        margin: 0 2.5rem;
+
+        p {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1264px) {
+  .nossas-equipes-container {
+    width: 1360px;
+  }
 }
diff --git a/lib/pescarte_web/controllers/equipes_controller.ex b/lib/pescarte_web/controllers/equipes_controller.ex
@@ -0,0 +1,7 @@
+defmodule PescarteWeb.EquipesController do
+  use PescarteWeb, :controller
+
+  def show(conn, _params) do
+    render(conn, :show, error_message: nil)
+  end
+end
diff --git a/lib/pescarte_web/design_system/navbar.ex b/lib/pescarte_web/design_system/navbar.ex
@@ -20,7 +20,7 @@ defmodule PescarteWeb.DesignSystem.Navbar do
             <.navlink label="Sobre" />
           </DesignSystem.link>
 
-          <.navlink label="Equipes" />
+          <.navlink label="Equipes" navigate={~p"/equipes"} />
         </ul>
         <PescarteWeb.DesignSystem.link navigate={~p"/acessar"} styless>
           <.button style="primary" class="login-button">
@@ -33,15 +33,18 @@ defmodule PescarteWeb.DesignSystem.Navbar do
     """
   end
 
-  attr :label, :string, required: true
+  attr(:label, :string, required: true)
+  attr(:navigate, :string, default: "/")
 
   defp navlink(assigns) do
     ~H"""
-    <li class="nav-link" aria-expanded="false">
-      <.text size="h4" color="text-blue-100" class="flex" style="gap: 8px;">
-        <%= @label %>
-      </.text>
-    </li>
+    <DesignSystem.link navigate={@navigate}>
+      <li class="nav-link" aria-expanded="false">
+        <.text size="h4" color="text-blue-100" class="flex" style="gap: 8px;">
+          <%= @label %>
+        </.text>
+      </li>
+    </DesignSystem.link>
     """
   end
 end
diff --git a/lib/pescarte_web/router.ex b/lib/pescarte_web/router.ex
@@ -32,6 +32,7 @@ defmodule PescarteWeb.Router do
     pipe_through :browser
 
     get "/", LandingController, :show
+    get "/equipes", EquipesController, :show
     get "/cooperativas", CooperativasController, :show
     get "/sobre", AboutUsController, :show
     get "/publicacoes", JournalController, :show

diff --git a/lib/pescarte_web/templates/equipes_html.ex b/lib/pescarte_web/templates/equipes_html.ex
@@ -0,0 +1,9 @@
+defmodule PescarteWeb.EquipesHTML do
+  use PescarteWeb, :html
+
+  embed_templates("equipes_html/*")
+
+  def handle_event("dialog", _value, socket) do
+    {:noreply, socket}
+  end
+end