basedosdados · AldemirLucas · Mar 10, 2026 · Feb 20, 2026 · Feb 20, 2026 · Feb 23, 2026
diff --git a/bdpro-lp.md b/bdpro-lp.md
@@ -0,0 +1,91 @@
+# Plano de Implementação: Landing Page BD PRO
+
+**Diretriz de Sincronização:** Todas as atualizações descritas neste documento devem ser rigorosamente refletidas em `next/pages/bdpro.js` e `next/public/locales/pt/bdpro.json` para manter a paridade entre o planejamento e a implementação.
+
+Este documento descreve a estrutura técnica e os componentes React para a implementação da landing page do produto BD PRO, seguindo os padrões do repositório e utilizando Chakra UI v1.8.8.
+
+## 1. Estrutura Geral da Página
+
+A página será implementada em `next/pages/pro.js` (ou similar) utilizando o template principal.
+
+- **Template:** `MainPageTemplate` (`next/components/templates/main.js`)
+- **Container Principal:** `VStack` com `width="100%"` e `spacing={0}`.
+- **Internacionalização:** Utilizar `next-i18next` para suporte a pt/en.
+
+## 2. Mapeamento de Telas e Componentes
+
+### Tela 1: Hero (Diferencial e Destaque)
+Definição do produto com foco em dados tratados e curadoria.
+
+- **Layout:** `VStack` para alinhamento central, `Stack` (row/column responsivo) para textos e boxes laterais.
+- **Mensagem Central:**
+  - `Display`: "o maior datalakehouse público da américa latina com dados atualizados e com curadoria"
+  - `BodyText`: "A BD é uma Organização Sem Fins Lucrativos pioneira na construção infraestrutura de dados públicos para o benefício público. Nosso produto de dados tira a dor de cabeça da necessidade de construir e manter códigos de coleta, tratamento, testagem e atualização de dados e colabora com o impacto da ONG."
+  - `LabelText`: "Mais de 25k de pesquisadores, servidores públicos e empresas utilizam o datalake house da BD mensalmente."
+- **Componentes Laterais (Esquerda e Direita):**
+  - Boxes randômicos com highlights para os principais conjuntos de dados.
+  - Efeito *on hover*: Exibir texto explicativo ao passar o mouse sobre o título.
+  - **Destaques:**
+    - **Cadastros de CNPJs**: Cadastro de CNPJs da Receita Federal atualizado mensalmente.
+    - **Cadastros de Obras**: Cadastro de obras da Receita Federal atualizado diariamente.
+    - **Cadastros do Datasus**: CNES, SIH, SIA... Atualizado mensalmente.
+    - **Cadastro Geral de Empregos**: Dados de emprego e mercado de trabalho.
+    - **Comex Stat**: Dados de comércio exterior.
+
+### Tela 2: Apresentação do Produto (Funcionalidades)
+Tabs horizontais com GIFs demonstrativos.
+
+- **Layout:** `Tabs` (Chakra UI) com `variant="unstyled"`.
+- **Componentes:**
+  - `TabList`: Centralizado, contendo 4 `GreenTab` (`next/components/atoms/GreenTab.js`).
+  - `TabPanels`: Contendo as `TabPanel` com os GIFs.
+  - `ChakraImage`: Para exibição dos GIFs otimizados.
+
+### Tela 3: Depoimentos (Prova Social)
+Carrossel com depoimentos de usuários.
+
+- **Layout:** `Box` com fundo contrastante ou sombra.
+- **Componentes:**
+  - `Carousel` (`next/components/atoms/Carousel.js`): Configurado com `pagination` e `navigation`.
+  - `Card` (`next/components/molecules/Card.js`): Adaptado para exibir foto, nome, cargo e depoimento.
+
+### Tela 4: Comparação de Planos (Prices)
+Reprodução da estrutura da página de preços atual para conversão direta.
+
+- **Layout:** `VStack` com espaçamento de `40px`, contendo o seletor de período e o grid de cards.
+- **Componentes:**
+  - `Toggle`: Interruptor para alternância entre faturamento mensal e anual (exibindo o selo de "economize 20%").
+  - `CardPrice`: Componente detalhado para os planos:
+    - **Grátis:** Recursos básicos para exploração.
+    - **Pro:** Focado em pesquisadores e consultores (dados sem defasagem e suporte prioritário).
+    - **Empresas:** Focado em médias e grandes instituições.
+- **Lógica de Negócio:**
+  - Consumo da API `/api/stripe/getPlans` para exibição de valores dinâmicos.
+  - Verificação de estado do usuário (logado/assinado) para alterar o CTA do botão (Assinar vs. Plano Atual).
+  - Tooltips informativos utilizando o componente `Tooltip` do Chakra UI.
+
+### Tela 5: FAQ (Dúvidas Frequentes)
+Dropdown com perguntas selecionadas.
+
+- **Layout:** `Accordion` (Chakra UI) com `allowMultiple`.
+- **Componentes:**
+  - `AccordionItem`: Cada pergunta/resposta.
+  - `AccordionButton` & `AccordionPanel`: Estilizados com `TitleText` (pequeno) e `BodyText`.
+  - `AccordionIcon`: Para indicação visual de abertura.
+
+## 3. Padrões de Texto e Tags (Titles)
+
+Seguindo `next/components/atoms/Text/`, utilizaremos:
+
+| Elemento | Componente | Typography | Uso Sugerido |
+| :--- | :--- | :--- | :--- |
+| H1 | `Display` | `large` | Título da Hero |
+| H2 | `TitleText` | `large` | Títulos de Seção |
+| H3 | `TitleText` | `medium` | Subtítulos e Cards |
+| P | `BodyText` | `large` | Descrições e FAQ |
+| Labels | `LabelText` | `medium` | Botões e Pequenas Tags |
+
+## 4. Próximos Passos
+1. Criar/atualizar arquivos de tradução em `next/public/locales/[lang]/bdpro.json`.
+2. Implementar componentes de seção em `next/components/organisms/ProLandingPage/`.
+3. Validar responsividade utilizando os hooks `isMobileMod()`.
diff --git a/next/blog/pt/analisando-preco-de-imoveis-em-sao-paulo.md b/next/blog/pt/analisando-preco-de-imoveis-em-sao-paulo.md
@@ -30,7 +30,7 @@ Nesta análise, concentramos nossa atenção no valor do metro quadrado constru
 
 A distribuição geográfica dos valores do metro quadrado construído na cidade de São Paulo revela uma notável disparidade. O bairro do Jardim Paulistano, localizado na Zona Norte da cidade, apresenta o menor valor de metro quadrado construído, avaliado em R$ 7.960, enquanto o bairro do Itaim Bibi, na Zona Oeste, registra o maior valor, impressionantes R$ 39.980 por metro quadrado. Isso significa que a diferença entre o metro quadrado mais caro e o mais barato na cidade é de aproximadamente cinco vezes, destacando as variações significativas nos preços imobiliários em diferentes regiões da metrópole paulistana. O valor médio por metro quadrado na cidade é R$ 23.088.
 
-Com assinatura BDPro você pode acessar dados atualizados periodicamente pelo cadastro fiscal da Prefeitura, com informações como valor do terreno, área construída, uso do imóvel e até características do bairro. Comece já seu [teste grátis](https://info.basedosdados.org/bd-pro) e explore!
+Com assinatura BDPro você pode acessar dados atualizados periodicamente pelo cadastro fiscal da Prefeitura, com informações como valor do terreno, área construída, uso do imóvel e até características do bairro. Comece já seu [teste grátis](https://basedosdados.org/bdpro) e explore!
 
 Que tal utilizar o código dessa análise para criar seus próprios recortes? Todos os códigos das análises que publicamos estão disponíveis em nosso [GitHub](https://github.com/basedosdados/analises/blob/main/redes_sociais/br_sp_geosampa_iptu_iptu_20230829.ipynb).
 

diff --git a/next/components/atoms/Link.js b/next/components/atoms/Link.js
@@ -15,7 +15,7 @@ export default function Link({
   const [isExternalLink, setIsExternalLink] = useState(false);
 
   useEffect(() => {
-    if (typeof window !== "undefined" && href) {
+    if (typeof window !== "undefined" && typeof href === "string") {
       setIsExternalLink(href.startsWith('http://') || href.startsWith('https://'));
     } else {
       setIsExternalLink(false);

diff --git a/next/components/atoms/Text/BodyText.js b/next/components/atoms/Text/BodyText.js
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   },
 };
 
-export default function BodyText ({ children, typography = "medium", ...props }) {
+const BodyText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="400"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function BodyText ({ children, typography = "medium", ...props })
       {children}
     </Text>
   );
-};
+});
+
+export default BodyText;
diff --git a/next/components/atoms/Text/Display.js b/next/components/atoms/Text/Display.js
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   },
 };
 
-export default function Display ({ children, typography = "medium", ...props }) {
+const Display = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function Display ({ children, typography = "medium", ...props })
       {children}
     </Text>
   );
-};
+});
+
+export default Display;
diff --git a/next/components/atoms/Text/LabelText.js b/next/components/atoms/Text/LabelText.js
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -23,11 +24,12 @@ const typographyStyles = {
   }
 };
 
-export default function LabelText ({ children, typography = "medium", ...props }) {
+const LabelText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -38,4 +40,6 @@ export default function LabelText ({ children, typography = "medium", ...props }
       {children}
     </Text>
   );
-};
+});
+
+export default LabelText;
diff --git a/next/components/atoms/Text/TitleText.js b/next/components/atoms/Text/TitleText.js
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Text } from "@chakra-ui/react";
 
 const typographyStyles = {
@@ -15,11 +16,12 @@ const typographyStyles = {
   }
 };
 
-export default function TitleText ({ children, typography = "medium", ...props }) {
+const TitleText = forwardRef(({ children, typography = "medium", ...props }, ref) => {
   const { fontSize, lineHeight } = typographyStyles[typography];
 
   return (
     <Text
+      ref={ref}
       fontFamily="Roboto"
       fontWeight="500"
       fontSize={fontSize}
@@ -30,4 +32,6 @@ export default function TitleText ({ children, typography = "medium", ...props }
       {children}
     </Text>
   );
-};
+});
+
+export default TitleText;
diff --git a/next/components/molecules/Card.js b/next/components/molecules/Card.js
@@ -9,6 +9,7 @@ export default function Card({
   icons = [],
   spacing = 5,
   padding = "25px 25px 25px 25px",
+  ...props
 }) {
 
   return (
@@ -23,6 +24,7 @@ export default function Card({
       padding={padding}
       borderRadius="10px"
       margin={{ base: "20px 0 !important", lg: "10px 0px" }}
+      {...props}
     >
       <Flex
         flexDirection="column"

diff --git a/next/components/molecules/DataInformationQuery.js b/next/components/molecules/DataInformationQuery.js
@@ -10,8 +10,6 @@ import {
   Tooltip,
   Skeleton,
   Stack,
-  useDisclosure,
-  ModalCloseButton,
   Spinner
 } from "@chakra-ui/react";
 import { useState, useEffect, useRef, useCallback, useMemo, memo } from "react";
@@ -24,15 +22,12 @@ import 'highlight.js/styles/obsidian.css'
 import { useTranslation } from 'next-i18next';
 import { useRouter } from "next/router";
 
-import TitleText from "../atoms/Text/TitleText";
 import LabelText from "../atoms/Text/LabelText";
 import BodyText from "../atoms/Text/BodyText";
 import Button from "../atoms/Button";
 import GreenTab from "../atoms/GreenTab";
 import Toggle from "../atoms/Toggle";
 import TableColumns from "./TableColumns";
-import { SectionPrice } from "../../pages/prices";
-import { ModalGeneral } from "./uiUserPage";
 import { AlertDiscalimerBox} from "./DisclaimerBox";
 import { triggerGAEvent, triggerGAEventWithData, formatBytes } from "../../utils";
 
@@ -193,7 +188,6 @@ const DataInformationQuery = memo(({ resource, datasetName, changeTab }) => {
   const [isLoadingCode, setIsLoadingCode] = useState(false);
   const [isLoadingSpin, setIsLoadingSpin] = useState(false);
   const [hasLoadingResponse, setHasLoadingResponse] = useState(false);
-  const plansModal = useDisclosure();
 
   const [gcpProjectID, setGcpProjectID] = useState("");
   const [gcpDatasetID, setGcpDatasetID] = useState("");
@@ -280,7 +274,7 @@ const DataInformationQuery = memo(({ resource, datasetName, changeTab }) => {
 
   const handleDownload = useCallback(() => {
     if(downloadWarning !== "free" && isUserPro() === false) {
-      plansModal.onOpen();
+      window.open("/bdpro", "_blank");
       return;
     }
     window.open(`/api/tables/downloadTable?p=${btoa(gcpDatasetID)}&q=${btoa(gcpTableId)}&d=${btoa(downloadPermitted)}&s=${btoa(downloadWarning)}`, "_blank");
@@ -398,32 +392,6 @@ read_sql(query, billing_project_id = get_billing_id())`, [sqlCode]);
       border="1px solid #DEDFE0"
       borderRadius="16px"
     >
-      <ModalGeneral
-        isOpen={plansModal.isOpen}
-        onClose={plansModal.onClose}
-        propsModalContent={{
-          minWidth: "fit-content"
-        }}
-      >
-        <Stack spacing={0} marginBottom="16px">
-          <TitleText
-            width="100%"
-            fontWeight="400"
-            textAlign="center"
-          >
-            {t('table.compareThePlans')}
-          </TitleText>
-          <ModalCloseButton
-            fontSize="14px"
-            top="34px"
-            right="26px"
-            _hover={{backgroundColor: "transparent", color:"#0B89E2"}}
-          />
-        </Stack>
-
-        <SectionPrice/>
-      </ModalGeneral>
-
       <Tabs
         width="100%"
         variant="unstyled"

diff --git a/next/components/molecules/Footer.js b/next/components/molecules/Footer.js
@@ -211,9 +211,9 @@ export default function Footer({ template, ocult = false }) {
               >
                 {t('footer.products.publicDatalake')}
               </FooterLink>
-              <FooterLink href={locale === 'en' ? "https://info.basedosdados.org/en/bd-pro" : 
-                                locale === 'es' ? "https://info.basedosdados.org/es/bd-pro" : 
-                                "https://info.basedosdados.org/bd-pro"}>
+              <FooterLink href={locale === 'en' ? "/en/bdpro" : 
+                                locale === 'es' ? "/es/bdpro" : 
+                                "/bdpro"}>
                 {t('footer.products.DBPro')}
               </FooterLink>
               {locale === 'pt' && (

diff --git a/next/components/molecules/Menu.js b/next/components/molecules/Menu.js
@@ -916,7 +916,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
         },
         {
           name: [t('exclusive_data')],
-          href: "https://info.basedosdados.org/bd-pro"
+          href: "/bdpro"
         },
         {
           name: [t('courses')],
@@ -945,7 +945,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
       [t('solutions')]: [
         {
           name: [t('exclusive_data')],
-          href: "https://info.basedosdados.org/en/bd-pro"
+          href: "/en/bdpro"
         }
       ],
       [t('resources')]: [
@@ -967,7 +967,7 @@ export default function MenuNav({ simpleTemplate = false, userTemplate = false }
       [t('solutions')]: [
         {
           name: [t('exclusive_data')],
-          href: "https://info.basedosdados.org/es/bd-pro"
+          href: "/es/bdpro"
         }
       ],
       [t('resources')]: [