* feito:�- colocar blur na capa ✅

- numerão: colocar 2.1 Bilhão ✅ - fotos antes e depois (capitulo bairro maravilha) ✅ - créditos das imagens em itálico ✅��*falta:�- arrumar ordem das coisas no mapa
prefeitura-rio · Jan 31, 2024 · ab123e3 · ab123e3
1 parent 60b9a09
commit ab123e3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/src/pages/plano-verao/components/chapters.js b/src/pages/plano-verao/components/chapters.js
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import * as styles from "./chapters.style";
 import tw from "tailwind-styled-components";
+import { ImgComparisonSlider } from "@img-comparison-slider/react";
 // import ReactDOM from "react-dom";
 // import DWChart from "react-datawrapper-chart";
 
@@ -119,7 +120,7 @@ export function Prejuizo(
           <styles.Grid1>
             <styles.BigNumber>R$</styles.BigNumber>
             <styles.BigNumber id="number">0</styles.BigNumber>
-            <styles.BigNumber1>milhões</styles.BigNumber1>
+            <styles.BigNumber1>Bilhões</styles.BigNumber1>
           </styles.Grid1>
           <styles.TextCard>
           Com um investimento total de R$ 2,1 bilhões, o Plano Verão implementou 308 ações preventivas desde 2021. 
@@ -341,32 +342,65 @@ export function Seop2(
   );
 }
 
-export function Seop1(
-  props = {
-    id: "",
-    chapRef: null,
-  }
-) {
+// export function Seop1(
+//   props = {
+//     id: "",
+//     chapRef: null,
+//   }
+// ) {
+//   props = setDefaultProps(props);
+
+//   return (
+//     <styles.ChapterGenericDiv1 ref={props.chapRef} id={props.id}>
+//       <styles.ContainerCard1>
+//         <styles.NewsImage src={seop1}></styles.NewsImage>
+//         <styles.Credito>
+//           Divulgação: Prefeitura da Cidade do Rio Janeiro / Marcos de Paula
+//         </styles.Credito>
+//         <styles.TextCard2><styles.Textyellow>Bairro Maravilha</styles.Textyellow></styles.TextCard2>
+//         <br />
+//         <styles.TextCard1>
+//         Outro projeto que atua diretamente na prevenção das chuvas é o Bairro Maravilha, responsável por urbanizar e levar infraestrutura à população. Já são 92 localidades beneficiadas e, até o fim de 2023, serão 49 km de ruas requalificadas, com R$ 977 milhões em investimentos no total. 
+//         <br /> <br />
+//         Neste ano, a Prefeitura do Rio iniciou o projeto Morar Carioca na comunidade do Aço, em Santa Cruz, na Zona Oeste. Com um investimento de R$ 243 milhões, em uma área de 195 mil metros quadrados, a comunidade do Aço ganhará 704 unidades habitacionais, que vão beneficiar diretamente quatro mil pessoas, além de melhorias em infraestrutura urbana.        </styles.TextCard1>
+//       </styles.ContainerCard1>
+//     </styles.ChapterGenericDiv1>
+//   );
+// }
+export function Seop1(props = { id: "", chapRef: null }) {
   props = setDefaultProps(props);
 
   return (
     <styles.ChapterGenericDiv1 ref={props.chapRef} id={props.id}>
       <styles.ContainerCard1>
-        <styles.NewsImage src={seop1}></styles.NewsImage>
+        <ImgComparisonSlider hover="hover" tabindex="0" class="rendered">
+          <img
+            slot="first"
+            src="https://storage.googleapis.com/rj-escritorio-dev-public/dataviz/obras/BM%20ANTES.jpg"
+          />
+          <img
+            slot="second"
+            src="https://storage.googleapis.com/rj-escritorio-dev-public/dataviz/obras/BM%20DEPOIS.jpg"
+          />
+          <svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
+            <path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+          </svg>
+        </ImgComparisonSlider>
         <styles.Credito>
           Divulgação: Prefeitura da Cidade do Rio Janeiro / Marcos de Paula
         </styles.Credito>
         <styles.TextCard2><styles.Textyellow>Bairro Maravilha</styles.Textyellow></styles.TextCard2>
         <br />
         <styles.TextCard1>
-        Outro projeto que atua diretamente na prevenção das chuvas é o Bairro Maravilha, responsável por urbanizar e levar infraestrutura à população. Já são 92 localidades beneficiadas e, até o fim de 2023, serão 49 km de ruas requalificadas, com R$ 977 milhões em investimentos no total. 
-        <br /> <br />
-        Neste ano, a Prefeitura do Rio iniciou o projeto Morar Carioca na comunidade do Aço, em Santa Cruz, na Zona Oeste. Com um investimento de R$ 243 milhões, em uma área de 195 mil metros quadrados, a comunidade do Aço ganhará 704 unidades habitacionais, que vão beneficiar diretamente quatro mil pessoas, além de melhorias em infraestrutura urbana.        </styles.TextCard1>
+          Outro projeto que atua diretamente na prevenção das chuvas é o Bairro Maravilha, responsável por urbanizar e levar infraestrutura à população. Já são 92 localidades beneficiadas e, até o fim de 2023, serão 49 km de ruas requalificadas, com R$ 977 milhões em investimentos no total.
+          <br /> <br />
+          Neste ano, a Prefeitura do Rio iniciou o projeto Morar Carioca na comunidade do Aço, em Santa Cruz, na Zona Oeste. Com um investimento de R$ 243 milhões, em uma área de 195 mil metros quadrados, a comunidade do Aço ganhará 704 unidades habitacionais, que vão beneficiar diretamente quatro mil pessoas, além de melhorias em infraestrutura urbana.
+
+        </styles.TextCard1>
       </styles.ContainerCard1>
     </styles.ChapterGenericDiv1>
   );
 }
-
 export function Zoom(
   props = {
     id: "",

diff --git a/src/pages/plano-verao/components/chapters.style.js b/src/pages/plano-verao/components/chapters.style.js
@@ -15,6 +15,7 @@ export const CapaDiv = tw(CapaDivSC)`
   flex flex-col 
   justify-start items-center 
   pl-5 pr-5  
+  bg-opacity-40 backdrop-blur
 `;
 // lg:mr-20 lg:ml-20
 // sm:ml-30 sm:mr-30
@@ -52,7 +53,7 @@ export const Credito = tw.div`
   text-sm text-left text-black
   lg:text-sm
   lg:text-left
-  
+  font-serif italic 
 `;
 
 export const IntroTitle = tw.div`

diff --git a/src/pages/plano-verao/story.js b/src/pages/plano-verao/story.js
@@ -223,11 +223,11 @@ export default function SubsidioSPPO() {
       num = { var: startCount };
     function changeNumber() {
       // id of the element you want to change
-      number.innerHTML = num.var.toFixed();
+      number.innerHTML = `${num.var.toFixed(1)}`;
     }
     const tl4 = gsap.timeline();
     tl4.to(num, {
-      var: 2100,
+      var: 2.1, 
       duration: 1,
       onUpdate: changeNumber,
     });