hotsite att

Author: gabrieltarozzo

src/client/src/app/hotsite/pages/index/index.component.html

@@ -102,40 +102,42 @@
   </header>
   <!--End Navigation-->
 
-
   <!-- Start Slider  -->
   <section id="home" class="home">
-    <div class="slider-overlay"></div>
+    <div class="centered-container-logo">
+    <div class="logos-container">
+      <img src="../../../../assets/hotsite/images/slider/logo1.jpeg" alt="Logo 1" class="logo">
+      <img src="../../../../assets/hotsite/images/slider/logo2.jpeg" alt="Logo 2" class="logo">
+      <img src="../../../../assets/hotsite/images/slider/logo3.jpeg" alt="Logo 3" class="logo">
+    </div>
+  </div>
+
 
     <div class="slider-text-wrapper">
       <div class="container">
-        <div class="big" style="color:white !important;font-size:31px;">{{'hotsite.base.header.title' | translate}}
+        <div class="big titlemain">{{'hotsite.base.header.title' | translate}}
         </div>
-        <div class="small" style="color:white !important;font-size:18px;">{{'hotsite.home.banner.text' | translate}} 
-          <p> </p> {{'hotsite.home.banner.text2' | translate}} 
+        <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>
       </div>
 
-      <style>
-
-      </style>
-
-      <div class="subtitlebox">
+<div class="centered-container">
+      <div class="subtitlebox credits-container">
         <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="flexslider">
-      <ul class="slides scroll">
-        <li class="first">
+    <div class="custom-flexslider">
+       <!-- <ul class="slides scroll">
+       <li class="first">
           <img src="../../../../assets/hotsite/images/slider/1.jpg" alt="">
         </li>
         <li class="secondary">
@@ -144,7 +146,7 @@
         <li class="third">
           <img src="../../../../assets/hotsite/images/slider/3.jpg" alt="">
         </li>
-      </ul>
+      </ul>-->
     </div>
 
 

src/client/src/app/hotsite/pages/index/index.component.scss

@@ -19,6 +19,6 @@
 
 .subtitlebox {
   color:white !important; width:390px;float:left;font-size:15px;margin:1px;padding:7px;font-weight: bold;
-  margin-top:8%;border:solid;border-width:1px;padding:15px;border-left:none;border-bottom:none;
+  margin-top:10%;border:solid;border-width:1px;padding:15px;border-left:none;border-bottom:none;
   margin-left:20px;
 }

src/client/src/assets/hotsite/css/style.css

@@ -827,23 +827,20 @@ section {
 }
 
 .slider-text-wrapper {
-	position: absolute;
-	display: inline-block;
-	width: 100%;
-	/* height: 250px; */
-	top: 50%;
-	left: 0;
-	margin-top: -250px;
-	text-align: center;
-	z-index:9999;
+  position: absolute;
+  top: 150px; /* Posiciona o container a 100px do topo da página */
+  left: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 9999;
 }
 
 .slider-text-wrapper .btn {
-	display: inline-block;
-	margin-top: 60px;
-	border:2px solid #FFF;
-	background:transparent;
-	color:#FFF;
+  display: inline-block;
+  margin-top: 60px; /* Ajuste o espaçamento entre o botão e o texto */
+  border: 2px solid #FFF;
+  background: transparent;
+  color: #FFF;
 }
 
 .flex-control-nav {
@@ -919,23 +916,170 @@ section {
 	color: #fff;
 }
 
-.slider-overlay {
-	/* background:url("../images/pattern.png") repeat rgba(0, 0, 0, .4); */
-	background:rgba(0, 0, 0, .4);
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	z-index: 100;
-	width: 100%;
-	height: 920px;
-}
+
 
 
 /*-----------------------------------------------------------------*/
 /*  Flexslider
 /*-----------------------------------------------------------------*/
 
+.centered-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  bottom: -320px; /* Ajuste conforme necessário */
+  left: 50%;
+  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 */
+  display: flex;
+  justify-content: space-between;
+  width: 150px; /* Ajuste a largura conforme necessário */
+  z-index: 10000;
+}
+
+.logo {
+  max-height: 40px; /* Tamanho fixo para as logos */
+  max-width: 100%;
+  margin-left: 10px; /* Espaçamento entre as logos */
+}
+
+.credits-container {
+
+  background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
+  color: #fff; /* Texto branco para mais destaque */
+  border-radius: 10px; /* Bordas arredondadas */
+  font-size: 14px; /* Ajuste o tamanho da fonte */
+
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Sombra para dar destaque */
+  z-index: 11000000; /* Garantir que a div de créditos fique sobre as logos */
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); /* Efeito de brilho no texto */
+}
+
+
+
+.credits-container p {
+  margin: 5px 0;
+}
+
+.credits-container strong {
+  font-weight: bold;
+}
+
+.titlemain {
+  color:white !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;
+  margin-bottom: 20px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.custom-flexslider {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  background-color: rgba(39, 2, 37);
+  overflow: hidden;
+  height: 100vh;
+}
+
+.custom-flexslider .slides > li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  color: #fff;
+  font-size: 24px;
+  text-align: center;
+}
+
+.custom-flexslider .slides .slide-text {
+  font-size: 18px;
+  color: #fff;
+}
+
+.custom-flexslider a:active, .custom-flexslider a:focus {
+  outline: none;
+}
+
+@media (max-width: 768px) {
+
+  .credits-container {
+    bottom: 50px;
+    right: 10px;
+    width: 200px;
+    font-size: 12px; /* Tamanho da fonte no mobile */
+  }
+
+  .logo {
+
+  }
+
+  .titleMain {
+    color:white !important;font-size:15px !important;
+  }
+  .bannertextMain {
+    color:white !important;font-size:12px !important;
+  }
+
+
+  .custom-flexslider {
+    height: 115vh;
+  }
+
+  .custom-flexslider .slides > li {
+    font-size: 18px;
+  }
+
+  .custom-flexslider .slides .slide-text {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 375px) {
+
+  .credits-container {
+    bottom: 40px;
+    right: 5px;
+    width: 180px;
+    font-size: 11px;
+  }
+
+  .logo {
+
+  }
+
+  .titleMain {
+    color:white !important;font-size:15px !important;
+  }
+  .bannertextMain {
+    color:white !important;font-size:12px !important;
+  }
+
+  .custom-flexslider {
+    height: 150vh;
+  }
+
+  .custom-flexslider .slides > li {
+    font-size: 16px;
+  }
+
+  .custom-flexslider .slides .slide-text {
+    font-size: 12px;
+  }
+}
+
 
 .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
 	outline: none;
@@ -2927,16 +3071,7 @@ footer {
  .thumnail-img {
 	width:50%;
 }
-.slider-overlay {
-	/* background:url("../images/pattern.png") repeat rgba(0, 0, 0, .4); */
-	background:rgba(0, 0, 0, .0);
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	z-index: -100;
-	width: 100%;
-}
+
 
 }
 

src/client/src/assets/hotsite/images/slider/logo1.jpeg

@@ -567,7 +567,8 @@
         "subtitle1": "Support: WWF",
         "subtitle2": "Conception and Coordination: LARISSA BOMBARDI",
         "subtitle3": "Cartographic and Technical Coordination: PABLO NEPOMUCENO",
-        "subtitle4": "Digital Development and Design: LAPIG"
+        "subtitle4": "Digital Development and Design: LAPIG/UFG",
+        "subtitle5": "Support: Fiocruz"
       },
       "abstract": {
         "title": "About",
@@ -581,7 +582,7 @@
         "text6": "With these overlaps, the interactions between different indicators associated with socio-environmental problems, such as, for example: deforestation, conflicts in the countryside, the increase in cases of poisoning by agricultural pesticides, poisoning through aerial spraying, the reduction of the area destined to the production of products aimed at feeding the Brazilian population, among other fundamental elements for the understanding of the theme of the use of pesticides in a broader way.",
         "readmore1":"The Agrotoxic WebAtlas aims to provide the population with graphic, cartographic and infographic information on the condition of use and the impact of pesticides on human and environmental health. It also aims to provide safe and official information so that sectors of organized civil society and also the public power have elements for the elaboration of public policies and projects aimed at food safety and sovereignty, the improvement of human health and environmental health. It also aims to provide concrete elements for the opposition and development of municipal, state, federal and international regulatory frameworks, with regard to the use of pesticides, their forms of application, their residues, and, ultimately, the forms of overcoming and limiting its use. In the WebAtlas dos Agrotoxics, the user can choose the cartographic base in which the chosen phenomenon will be represented, for example: poisoning by pesticides in Brazilian regions or in specific municipalities, or even by biomes or eco regions. WebAtlas history goes back to Atlas",
         "readmore2HREF": "“Geography of Pesticides Use in Brazil and Connections with the European Union”",
-        "readmore3": "authored by Prof. Dra Larissa Bombardi and published by the Faculty of Philosophy, Letters and Human Sciences. This work, for the first time, brought to the public in a mapped way the reality of the use and impact of pesticides in Brazil."
+        "readmore3": "authored by Prof. Dra Larissa Bombardi and published by the Faculty of Philosophy, Letters and Human Sciences. This work, for the first time, brought to the public in a mapped way the reality of the use and impact of pesticides in Brazil. Now, WebAtlas offers the public the possibility of accessing the set of cartograms interactively."
       },
       "options": {
         "method": {

src/client/src/assets/hotsite/images/slider/logo2.jpeg

@@ -568,7 +568,8 @@
         "subtitle1": "Apoio: WWF",
         "subtitle2": "Concepção e Coordenação Geral: LARISSA BOMBARDI",
         "subtitle3": "Coordenação Cartográfica e Técnica: PABLO NEPOMUCENO",
-        "subtitle4": "Desenvolvimento Digital e Design: LAPIG"
+        "subtitle4": "Desenvolvimento Digital e Design: LAPIG/UFG",
+        "subtitle5": "Apoio: Fiocruz"
       },
       "abstract": {
         "title": "Sobre",
@@ -582,7 +583,7 @@
         "text6": "Com estas sobreposições, ficam ainda mais claras as interações entre diversos indicadores associados a problemas socioambientais como, por exemplo: o desmatamento, os conflitos no campo, o aumento dos casos de intoxicações por agrotóxicos de uso agrícola, as intoxicações por meio de pulverização aérea, a diminuição da área destinada à produção de gêneros voltados à alimentação da população brasileira, dentre outros elementos fundamentais para a compreensão do tema do uso de agrotóxicos de uma forma ampliada.",
         "readmore1":"O WebAtlas dos Agrotóxicos tem como horizonte subsidiar a população com informações gráficas, cartográficas e infográficas sobre a condição do uso e do impacto dos agrotóxicos na saúde humana e na saúde ambiental. Visa, ainda, fornecer informações seguras e oficiais para que setores da sociedade civil organizada e, também o poder público, tenham elementos para a elaboração de políticas públicas e projetos voltados à segurança e soberania alimentar, à melhoria da saúde humana e da saúde ambiental. Objetiva, também, fornecer elementos concretos para a oposição e desenvolvimento de marcos regulatórios municipais, estaduais, federais e internacionais, no que diz respeito ao uso de agrotóxicos, às suas formas de aplicação, aos seus resíduos, e, no limite, às formas de superação e de limitação de seu uso. No WebAtlas dos Agrotóxicos o usuário poderá escolher a base cartográfica em que verá representado o fenômeno escolhido, por exemplo: intoxicações por agrotóxicos nas regiões brasileiras ou em municípios específicos, ou ainda, por biomas ou por eco regiões. O histórico do WebAtlas remete ao Atlas",
         "readmore2HREF": "“Geografia do Uso de Agrotóxicos no Brasil e Conexões com a União Europeia”",
-        "readmore3": "de autoria da Profa Dra Larissa Bombardi e publicado pela Faculdade de Filosofia, Letras e Ciências Humanas. Esta obra, pela primeira vez, trouxe ao público de forma cartografada a realidade do uso e do impacto dos agrotóxicos no Brasil."
+        "readmore3": "de autoria da Profa Dra Larissa Bombardi e publicado pela Faculdade de Filosofia, Letras e Ciências Humanas. Esta obra, pela primeira vez, trouxe ao público de forma cartografada a realidade do uso e do impacto dos agrotóxicos no Brasil. Agora, o WebAtlas traz ao público a possibilidade de acessar o conjunto de cartogramas de forma interativa."
       },
       "options": {
         "method": {