alteracoes hotsite

lapig-ufg · Dec 9, 2024 · 01d6cb1 · 01d6cb1
1 parent 4f69ffe
commit 01d6cb1
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 32 deletions.
diff --git a/src/client/src/app/hotsite/pages/index/index.component.html b/src/client/src/app/hotsite/pages/index/index.component.html
@@ -103,7 +103,7 @@
   <!--End Navigation-->
 
   <!-- Start Slider  -->
-  <section id="home" class="home">
+  <section id="home" class="home" >
     <div class="centered-container-logo">
     <div class="logos-container">
       <img src="../../../../assets/hotsite/images/slider/logo1.jpeg" alt="Logo 1" class="logo">
@@ -114,40 +114,44 @@
   </div>
 
 
-    <div class="slider-text-wrapper">
+    <div class="slider-text-wrapper" >
+
       <div class="container">
         <div class="big titlemain">{{'hotsite.base.header.title' | translate}}
         </div>
         <div class="small bannertextMain">{{'hotsite.home.banner.text' | translate}}
           <p> </p> {{'hotsite.home.banner.text2' | translate}}
         </div>
-        <a href="/map" class="middle btn btn-white myHover">{{'hotsite.home.banner.btn' | translate}}</a>
+        <a href="/map" class="middle btn btn-white myHover" style="color:rgb(94, 11, 89);border-color:rgb(94, 11, 89);">{{'hotsite.home.banner.btn' | translate}}</a>
       </div>
 
 <div class="centered-container">
       <div class="subtitlebox credits-container">
-        <p class="subtitle"> {{'hotsite.home.banner.subtitle1' | translate}} </p>
+       <!--  <p class="subtitle"> {{'hotsite.home.banner.subtitle1' | translate}} </p> -->
         <p class="subtitle"> {{'hotsite.home.banner.subtitle2' | translate}} </p>
         <p class="subtitle"> {{'hotsite.home.banner.subtitle3' | translate}} </p>
         <p class="subtitle"> {{'hotsite.home.banner.subtitle4' | translate}} </p>
         <p class="subtitle"> {{'hotsite.home.banner.subtitle5' | translate}} </p>
 
       </div>
+
     </div>
     </div>
 
-    <div class="custom-flexslider">
-       <!-- <ul class="slides scroll">
+    <div class="custom-flexslider" >
+      <img src="../../../../assets/hotsite/images/slider/1.png" alt="Background" class="background-image">
+      <!-- <div class="overlay-roxo"></div> Camada de overlay roxo -->
+      <!--  <ul class="slides scroll">
        <li class="first">
-          <img src="../../../../assets/hotsite/images/slider/1.jpg" alt="">
+          <img src="../../../../assets/hotsite/images/slider/1.png" alt="">
         </li>
-        <li class="secondary">
+         <li class="secondary">
           <img src="../../../../assets/hotsite/images/slider/2.jpg" alt="">
         </li>
         <li class="third">
           <img src="../../../../assets/hotsite/images/slider/3.jpg" alt="">
         </li>
-      </ul>-->
+      </ul> -->
     </div>
 
 

diff --git a/src/client/src/assets/hotsite/css/style.css b/src/client/src/assets/hotsite/css/style.css
@@ -52,7 +52,8 @@ html, body {
 
 
 .myHover:hover {
-	background-color:rgb(54, 4, 56) !important;
+	/* background-color:rgb(54, 4, 56) !important; */
+  background-color:white !important;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -928,32 +929,56 @@ section {
   flex-direction: column;
   align-items: center;
   position: absolute;
-  bottom: -320px; /* Ajuste conforme necessário */
-  left: 50%;
+  bottom: -420px; /* Ajuste conforme necessário */
+  left: 200px;
   transform: translateX(-50%);
   z-index: 10000;
   text-align: center; /* Alinha o texto centralmente */
 }
 
 .logos-container {
   position: absolute;
-  bottom: 10px; /* Ajuste a distância do fundo */
-  right: 20px;  /* Ajuste a distância da direita */
+  bottom: 40px;
+  right: 145px;
   display: flex;
   justify-content: space-between;
-  width: 200px; /* Ajuste a largura conforme necessário */
+  width: 200px;
   z-index: 10000;
 }
 
 .logo {
-  max-height: 40px; /* Tamanho fixo para as logos */
+  max-height: 80px;
   max-width: 100%;
-  margin-left: 10px; /* Espaçamento entre as logos */
+  margin-left: 10px;
+}
+/*
+.logos-container {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+.logo {
+  max-height: 60px;
+  max-width: 100%;
+  margin-left: 10px;
+}
+*/
+
+.overlay-roxo {
+	/* background:rgba(117, 17, 75, 0.4) url("../images/pattern.png") repeat; */
+  background:rgba(79, 158, 63, 0.4) url("../images/pattern.png") repeat;
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
 }
 
 .credits-container {
 
-  background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
+  background-color: rgba(79, 158, 63, 0.4); /* Fundo semi-transparente */
   color: #fff; /* Texto branco para mais destaque */
   border-radius: 10px; /* Bordas arredondadas */
   font-size: 14px; /* Ajuste o tamanho da fonte */
@@ -963,8 +988,6 @@ section {
   text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); /* Efeito de brilho no texto */
 }
 
-
-
 .credits-container p {
   margin: 5px 0;
 }
@@ -974,13 +997,13 @@ section {
 }
 
 .titlemain {
-  color:white !important;font-size:31px !important;
+  color:rgb(94, 11, 89) !important;font-size:31px !important;
     font-weight: bold !important;
     margin-bottom: 10px !important;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important; /* Sombra no texto */
 }
 .bannertextMain {
-  color:white !important;font-size:18px !important;
+  color:rgb(94, 11, 89) !important;font-size:18px !important;
   margin-bottom: 20px;
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
@@ -989,11 +1012,20 @@ section {
   margin: 0;
   padding: 0;
   position: relative;
-  background-color: rgba(39, 2, 37);
+  background-color: rgba(0, 0, 0, 0.5) !important;;
   overflow: hidden;
   height: 1000px;
 }
 
+.background-image{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
+}
+
 .custom-flexslider .slides > li {
   display: flex;
   justify-content: center;
@@ -1015,6 +1047,21 @@ section {
 
 @media (max-width: 768px) {
 
+
+  .centered-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    bottom: -280px; /* Ajuste conforme necessário */
+    left: 47%;
+    transform: translateX(-50%);
+    z-index: 10000;
+    text-align: center; /* Alinha o texto centralmente */
+  }
+
+
+
   .credits-container {
     bottom: 50px;
     right: 10px;
@@ -1023,14 +1070,16 @@ section {
   }
 
   .logo {
-
+    max-height: 70px;
+    max-width: 100%;
+    margin-left: 10px;
   }
 
   .titleMain {
-    color:white !important;font-size:15px !important;
+    color:rgb(94, 11, 89)  !important;font-size:15px !important;
   }
   .bannertextMain {
-    color:white !important;font-size:12px !important;
+    color:rgb(94, 11, 89)  !important;font-size:12px !important;
   }
 
 
@@ -1049,6 +1098,19 @@ section {
 
 @media (max-width: 375px) {
 
+  .centered-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    bottom: -320px; /* Ajuste conforme necessário */
+    left: 47%;
+    transform: translateX(-50%);
+    z-index: 10000;
+    text-align: center; /* Alinha o texto centralmente */
+  }
+
+
   .credits-container {
     bottom: 40px;
     right: 5px;
@@ -1061,10 +1123,10 @@ section {
   }
 
   .titleMain {
-    color:white !important;font-size:15px !important;
+    color:rgb(94, 11, 89) !important;font-size:15px !important;
   }
   .bannertextMain {
-    color:white !important;font-size:12px !important;
+    color:rgb(94, 11, 89) !important;font-size:12px !important;
   }
 
   .custom-flexslider {

diff --git a/src/client/src/assets/hotsite/images/slider/1.png b/src/client/src/assets/hotsite/images/slider/1.png
diff --git a/src/client/src/assets/locales/en.json b/src/client/src/assets/locales/en.json
@@ -565,10 +565,10 @@
         "text2": "We therefore make available, in this online environment, cartographic sets with the spatial representation of the use of agrotoxics in the country, their impacts and correct themes.",
         "btn": "Access the Atlas",
         "subtitle1": "Support: WWF",
-        "subtitle2": "Conception and Coordination: LARISSA BOMBARDI",
+        "subtitle2": "General Coordination: LARISSA BOMBARDI",
         "subtitle3": "Cartographic and Technical Coordination: PABLO NEPOMUCENO",
         "subtitle4": "Digital Development and Design: LAPIG/UFG",
-        "subtitle5": "Support: Fiocruz"
+        "subtitle5": "Support: WWF, Fiocruz"
       },
       "abstract": {
         "title": "About",

diff --git a/src/client/src/assets/locales/pt.json b/src/client/src/assets/locales/pt.json
@@ -566,10 +566,10 @@
         "text2": "Disponibilizamos, assim, neste ambiente online, conjuntos cartográficos com a representação espacial do uso de agrotóxicos no país, seus impactos e temas corretalos.",
         "btn": "Acesse o Atlas Online",
         "subtitle1": "Apoio: WWF",
-        "subtitle2": "Concepção e Coordenação Geral: LARISSA BOMBARDI",
+        "subtitle2": "Coordenação Geral: LARISSA BOMBARDI",
         "subtitle3": "Coordenação Cartográfica e Técnica: PABLO NEPOMUCENO",
         "subtitle4": "Desenvolvimento Digital e Design: LAPIG/UFG",
-        "subtitle5": "Apoio: Fiocruz"
+        "subtitle5": "Apoio: WWF, Fiocruz"
       },
       "abstract": {
         "title": "Sobre",