fix/quem somos update (#206)

* fix: add banners, images, and visual fixes * fix: improve responsiveness for 'sobre' page
peapescarte · Sep 8, 2024 · c4b7032 · c4b7032
1 parent e4942fd
commit c4b7032
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 28 deletions.
diff --git a/assets/css/aboutus.scss b/assets/css/aboutus.scss
@@ -6,6 +6,26 @@
   }
 }
 
+.lighter-banner{
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  gap: 20px;
+  height: 260px;
+  margin-bottom: 20px;
+  background: #0064c8b0;
+  background-blend-mode: multiply;
+
+  .banner-img {
+      z-index: -1;
+      position: absolute;
+      width: 100vw;
+      height: 260px;
+  }
+
+}
+
 .get-to-know {
   display: flex;
   align-items: center;
@@ -51,24 +71,39 @@
   }
 }
 
+.phases-img {
+  display: flex;
+  justify-content: center;
+  margin: 100px 0px;
+}
+
+@media (min-width: 360px) and (max-width: 768px) {
+  .phases-img {
+    display: none;
+  }
+}
+
 .phases {
   display: flex;
   align-items: flex-start;
-  gap: 56px;
+  justify-content: center;
+  gap: 180px;
   padding: 40px;
 
   img {
     object-fit: cover;
     height: 490px;
     max-width: 668px;
-    width: 100%;
+    width: 50%;
     border-radius: 16px;
     transition: height 0.4s ease;
   }
 
   .phase-content {
     display: flex;
     flex-direction: column;
+    width: 50%;
+    max-width: 800px;
 
     .current-phase {
       display: flex;
@@ -101,9 +136,6 @@
     }
 
     .accordion {
-      max-width: 800px;
-      min-width: 600px;
-
       .accordion-bx {
         display: flex;
         flex-direction: column;
@@ -132,7 +164,7 @@
         }
 
         h4 {
-          padding-left: 25px;
+          padding: 10px 25px;
         }
 
         .accordion-content {
@@ -163,22 +195,34 @@
     }
   }
 
-  @media (max-width: 980px) {
+  @media (min-width: 768px) and (max-width: 1024px) {
     padding: 40px 10px;
+    gap: 90px;
 
-    .phase-content {
-      width: 50%;
+    .accordion {
+      max-width: fit-content;
+    }
 
-      .accordion-bx {
-        width: 75%;
-        @media(max-width: 810px) {
-          width: 60%;
-        }
-      }
+  }
+
+}
+
+@media (min-width: 360px) and (max-width: 768px) {
+  .phases {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 35px;
+
+    .phase-content {
+      order: 1;
+      width: 100%;
     }
 
     img {
-      width: 50%;
+      order: 2; 
+      width: 100%;
     }
 
   }
@@ -202,6 +246,7 @@
   }
 
   img {
+    object-fit: cover;
     width: 100vw;
     height: 100%;
     z-index: -1;

diff --git a/assets/js/accordion.js b/assets/js/accordion.js
@@ -4,16 +4,20 @@ phases.forEach(phase => {
     const accordions = phase.getElementsByClassName('accordion-bx');
     const image = phase.querySelector('img');
     const initHeight = image.scrollHeight;
-
+    
     function adjustImageHeight() {
-        let newHeight = initHeight;
-        Array.from(accordions).forEach(accordion => {
-            if (accordion.classList.contains('active')) {
-                const phaseContentHeight = phase.querySelector('.phase-content').scrollHeight;
-                newHeight = phaseContentHeight;
-            }
-        });
-        image.style.height = `${newHeight}px`;
+        const windowWidth = window.innerWidth;
+
+        if (windowWidth > 768) {
+            let newHeight = initHeight;
+            Array.from(accordions).forEach(accordion => {
+                if (accordion.classList.contains('active')) {
+                    const phaseContentHeight = phase.querySelector('.phase-content').scrollHeight;
+                    newHeight = phaseContentHeight;
+                }
+            });
+            image.style.height = `${newHeight}px`;
+        }
     }
 
     for (let i = 0; i < accordions.length; i++) {

diff --git a/lib/pescarte_web/templates/aboutus_html/show.html.heex b/lib/pescarte_web/templates/aboutus_html/show.html.heex
@@ -1,4 +1,11 @@
 <main class="aboutus-wrapper">
+  <div class="lighter-banner">
+    <img src={~p"/images/light-banner-bg.png"} class="banner-img" />
+    <.text size="h2" color="text-white-100">
+      Sobre
+    </.text>
+  </div>
+
   <div class="get-to-know">
     <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/sobre_1.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL3NvYnJlXzEucG5nIiwiaWF0IjoxNzI0MzQ2OTE1LCJleHAiOjIwMzk3MDY5MTV9.J7I7kUsYTdVVseCs6QcGXHAAXIdrSPo-vEEurvrF2Kw&t=2024-08-22T17%3A15%3A15.147Z" />
     <div class="know-content">
@@ -23,14 +30,17 @@
         Licenciamento Ambiental Federal
       </.text>
       <.text size="lg" color="text-black-80">
-        O Licenciamento Ambiental Federal é um processo administrativo realizado pelo Instituto Brasileiro do Meio Ambiente e dos Recursos Naturais RenovÃ¡veis (Ibama). Este processo visa assegurar que atividades e empreendimentos potencialmente poluidores atendam Ã s normas ambientais, minimizando impactos ao meio ambiente.
+        O Licenciamento Ambiental Federal é um processo administrativo realizado pelo Instituto Brasileiro do Meio Ambiente e dos Recursos Naturais Renováveis (Ibama). Este processo visa assegurar que atividades e empreendimentos potencialmente poluidores atendam às normas ambientais, minimizando impactos ao meio ambiente.
       </.text>
     </div>
-    <img src={~p"/images/img_slide4.svg"} />
+    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/licenciamento_ambiental.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL2xpY2VuY2lhbWVudG9fYW1iaWVudGFsLkpQRyIsImlhdCI6MTcyNTM4Mzc4MSwiZXhwIjoyMDQwNzQzNzgxfQ.StLvPFpV1H_nVc6CIUq3qHORBLIuJbewMhOND1w9iyE&t=2024-09-03T17%3A16%3A21.334Z" />
   </div>
 
   <div class="get-to-know">
-    <img src={~p"/images/img_slide4.svg"} />
+    <img
+      style="object-fit: contain"
+      src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/Logo_IBAMA.svg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL0xvZ29fSUJBTUEuc3ZnIiwiaWF0IjoxNzI1MzgzMzg5LCJleHAiOjIwNDA3NDMzODl9.Dt7KGoEC9eu7p4JEV-I9BzvZgBQgC2K0OuSbK6_8pNk&t=2024-09-03T17%3A09%3A49.837Z"
+    />
     <div class="know-content">
       <.text size="h2" color="text-blue-100">
         IBAMA
@@ -41,6 +51,17 @@
     </div>
   </div>
 
+  <div class="lighter-banner">
+    <img src={~p"/images/light-banner-bg.png"} class="banner-img" />
+    <.text size="h2" color="text-white-100">
+      Nossa linha do Tempo e Fases
+    </.text>
+  </div>
+
+  <div class="phases-img">
+    <img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/sobre/Linha%20do%20tempo%20-%20Fases%20do%20Pescarte_atual_versaosite.jpeg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL3NvYnJlL0xpbmhhIGRvIHRlbXBvIC0gRmFzZXMgZG8gUGVzY2FydGVfYXR1YWxfdmVyc2Fvc2l0ZS5qcGVnIiwiaWF0IjoxNzI1NjI1MzU4LCJleHAiOjIwNDA5ODUzNTh9.-GeuXA3RR4LD15MmHeJHFR0Q1D7n15Ly0ll6lLfaZig&t=2024-09-06T12%3A22%3A39.490Z" />
+  </div>
+
   <div class="phases">
     <div class="phase-content">
       <.text size="h2" color="text-blue-100">

diff --git a/priv/static/images/light-banner-bg.png b/priv/static/images/light-banner-bg.png