feat: add BD Pro lading page POC

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()`.

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"

next/components/molecules/QuestionsBox.js

@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import {
+  Box,
+  Stack,
+  Collapse,
+  Divider,
+} from "@chakra-ui/react";
+import ReactMarkdown from "react-markdown";
+
+import LabelText from "../atoms/Text/LabelText";
+import CrossIcon from "../../public/img/icons/crossIcon";
+import styles from "../../styles/faq.module.css";
+
+export default function QuestionsBox({ question, answer, id, active }) {
+  const [isActive, setIsActive] = useState(false)
+  const router = useRouter()
+
+  const scrollFocus = (idElement) => {
+    const el = document.getElementById(idElement)
+    if (!el) return;
+    const targetElement = el.getBoundingClientRect()
+    const heightScreen = window.innerHeight
+    const positionTarget = targetElement.top
+
+    window.scrollTo(0, positionTarget - (heightScreen/2))
+  }
+
+  useEffect(() => {
+    setIsActive(false)
+  },[active])
+
+  useEffect(() => {
+    if(router.asPath.split('#')[1] === id) return setIsActive(true)
+  },[id, router.asPath])
+
+  useEffect(() => {
+    if(router.asPath.split('#')[1] === id) return scrollFocus(id)
+  },[isActive, router.asPath])
+
+  const OpenCloseQuestion = () => {
+    setIsActive(!isActive)
+  }
+
+  return (
+    <Stack
+      spacing={0}
+      className={styles.questionContainer}
+    >
+      <Box
+        display="flex"
+        cursor="pointer"
+        paddingBottom="24px"
+        gap="20px"
+        alignItems="center"
+        justifyContent="space-between"
+        _hover={{
+          opacity: 0.8
+        }}
+        transition="opacity 0.2s ease"
+        onClick={() => OpenCloseQuestion()}
+      >
+        <LabelText typography="x-large">
+          {question}
+        </LabelText>
+        <CrossIcon
+          alt={isActive ? "fecha pergunta" : "abrir pergunta"}
+          color="#252A32"
+          transform={!isActive ? "rotate(45deg)" : "none"}
+          width="20px"
+          height="20px"
+        />
+      </Box>
+      <Collapse in={isActive} animateOpacity>
+        <Box
+          id={id}
+          as="div"
+          height={isActive ? "100%" : "0"}
+          marginBottom={isActive ? "32px !important" : undefined}
+          overflow="hidden"
+          transition="all 1s ease"
+          fontFamily="Roboto"
+          color="#464A51"
+          fontSize="18px"
+          lineHeight="28px"
+          fontWeight="400"
+        >
+          <ReactMarkdown>{answer}</ReactMarkdown>
+        </Box>
+      </Collapse>
+      <Divider borderColor="#DEDFE0"/>
+    </Stack>
+  )
+}

next/content/bdPro/FAQ/pt/access-bases.md

@@ -0,0 +1,8 @@
+---
+question: Quais bases tenho acesso?
+categories: []
+keywords: []
+id: access-bases
+---
+
+Você pode acompanhar os dados que já temos disponíveis [aqui](https://basedosdados.org/search?contains=tables).

next/content/bdPro/FAQ/pt/access-to-recent-data.md

@@ -0,0 +1,8 @@
+---
+question: Como faço para ter acesso aos dados mais recentes?
+categories: []
+keywords: []
+id: access-to-recent-data
+---
+
+Para ter acesso à assinatura Pro, basta assinar o nosso serviço clicando no link abaixo, e seu acesso é concedido instantaneamente! Qualquer pessoa ou organização pode assinar sem restrições. Uma vez que o pagamento é concluído, o acesso é concedido automaticamente para o usuário, que já pode usufruir dos benefícios da plataforma.

next/content/bdPro/FAQ/pt/data-access-limit.md

@@ -0,0 +1,8 @@
+---
+question: Existe um limite de uso dos dados BD Pro?
+categories: []
+keywords: []
+id: data-access-limit
+---
+
+Não, porém existe uma cota gratuita de 1TB/mês concedida pelo Google a todos os usuários que, caso excedida, pode incorrer em cobranças extras por parte do Google Cloud.

next/content/bdPro/FAQ/pt/difference-open-pro copy.md

@@ -0,0 +1,21 @@
+---
+question: Por que existem tabelas BD Pro que também estão abertas?
+categories: []
+keywords: []
+id: difference-open-pro
+---
+
+Além dos dados exclusivos BD Pro, a assinatura inclúi uma versão de conjuntos abertos da BD, mas com uma média frequência de atualização. 
+
+A regra geral para a diferença entre a versão aberta dos dados e a assinatura Pro é de seis unidades temporais. Ou seja, se um conjunto é atualizado diariamente, a versão aberta dos dados tera uma defasagem de seis dias com relação aos dados mais recentes. No caso de um conjunto com uma frequência mensal de atualização, a defasagem será de seis meses, e assim por diante. 
+
+
+Você pode conferir a diferença entre a versão aberta e a versão BD Pro das tabelas de um conjunto de dados pela ‘página de conjuntos’ em nosso site. 
+
+
+![table-coverage](https://storage.googleapis.com/basedosdados-website/bdpro/faq/table-coverage.png)
+
+
+Ao selecionar uma tabela, você pode conferir sua frequência de atualização e cobertura temporal na página da tabela:
+
+![update-frequency](https://storage.googleapis.com/basedosdados-website/bdpro/faq/table-update-frequency.png)

next/content/bdPro/FAQ/pt/difference-open-pro.md

@@ -0,0 +1,13 @@
+---
+question: Qual é a diferença entre a versão aberta da BD e a assinatura Pro?
+categories: []
+keywords: []
+id: difference-open-pro
+---
+
+A assinatura Pro é uma versão mais poderosa, atualizada e completa do datalake. Enquanto a versão aberta possui uma defasagem intencional de atualização (geralmente seis unidades temporais, como 6 meses de atraso no Comex Stat), os assinantes Pro acessam esses dados sem atraso. Além disso, bases de alto valor de mercado, como cotações de ações, são exclusivas para assinantes.
+
+A defasagem de atualização entre a versão aberta e a assinatura Pro desse conjunto é de seis meses, mas essa diferença varia para cada conjunto, geralmente seguindo um padrão de seis unidades temporais da sua frequência de atualização. Você pode conferir a cobertura temporal de cada tabela pela página do conjunto no site da BD. 
+
+
+![open-pro](https://storage.googleapis.com/basedosdados-website/bdpro/faq/table-coverage.png)

next/content/bdPro/FAQ/pt/extra-billing.md

@@ -0,0 +1,12 @@
+---
+question: Posso ter cobranças extras por usar os dados BD Pro?
+categories: []
+keywords: []
+id: extra-billing
+---
+
+É importante dizer que a Base dos Dados jamais cobrará taxas extras sem o usuário ter confirmado e processo o pagamento por conta própria em nosso portal de pagamento.
+
+Porém o usuário poderá ser cobrado pelo Google Cloud caso exceda sua cota gratuita no projeto que está utilizando e ele tenha habilitado a cobrança pelo Google. No momento, o custo de análise do Big Query é de US$5/TB adicional processado
+
+O detalhamento atualizado dos custos do Google Cloud Plataform para o Big Query podem ser acessados nesse link: [Preços  |  BigQuery: armazenamento de dados na nuvem  |  Google Cloud](https://cloud.google.com/bigquery/pricing?hl=pt-br)

next/content/bdPro/FAQ/pt/how-to-access-data.md

@@ -0,0 +1,14 @@
+---
+question: Como posso acessar os dados?
+categories: []
+keywords: []
+id: how-to-access-data
+---
+
+Os dados BD Pro podem ser acessados de inúmeras maneiras entre elas:
+
+* Diretamente no Google Big Query, utilizando SQL para fazer consultas
+* Por meio dos nossos pacotes de programação que incluem, Python, R e Stata
+* Através de ferramentas de BI, como Power BI, Tableau, Qlik entre outras.
+
+Em todos os casos você precisará criar um projeto no Big Query com a sua conta cadastrada na BD Pro.

next/content/bdPro/FAQ/pt/how-to-create-bq-project.md

@@ -0,0 +1,8 @@
+---
+question: Como criar um projeto no Big Query?
+categories: []
+keywords: []
+id: how-to-create-bq-project
+---
+
+Nós temos uma documentação completa de como criar um projeto no Google Biq Query. Acesse o [tutorial](https://basedosdados.org/docs/access_data_bq) para utilizar a assinatura Pro.

next/content/bdPro/FAQ/pt/how-to-use-python-r-stata.md

@@ -0,0 +1,15 @@
+---
+question: Como posso usar os pacotes de Python, R e Stata da assinatura?
+categories: []
+keywords: []
+id: how-to-use-python-r-stata
+---
+
+Nós temos uma [documentação completa](https://basedosdados.org/docs/access_data_packages) de como como utilizar os pacotes da Base dos Dados para acessar os dados da BD Pro. ---
+question: Como posso usar os pacotes de Python, R e Stata da assinatura?
+categories: []
+keywords: []
+id: how-to-use-python-r-stata
+---
+
+Nós temos uma [documentação completa](https://basedosdados.org/docs/access_data_packages) de como como utilizar os pacotes da Base dos Dados para acessar os dados da BD Pro. 

next/content/bdPro/FAQ/pt/what-is-bdpro.md

@@ -0,0 +1,11 @@
+---
+question: O que é o BD Pro?
+categories: [data]
+keywords: []
+id: what-is-bdpro
+---
+
+O BD Pro é a assinatura que garante acesso ao que há de mais atualizado em dados públicos no Brasil. Com ela, você acessa dezenas de bases de dados de média frequência — como CNPJ, CAGED, Comex e Datasus — tratadas, integradas e prontas para análise via SQL, Python ou R. Além disso, assinantes contam com notificações automáticas de atualização e limites ampliados para download direto.
+
+
+Ao assinar o BD Pro, você financia a sustentabilidade da Base dos Dados, uma organização sem fins lucrativos. Sua assinatura permite que continuemos limpando, padronizando e disponibilizando gratuitamente milhares de outras bases de dados, democratizando o acesso à informação de qualidade e acelerando o trabalho de pesquisadores, jornalistas, gestores públicos e empresas que buscam solucionar problemas do país através de dados.

next/content/bdPro/FAQ/pt/what-is-integranted-data.md

@@ -0,0 +1,12 @@
+---
+question: O que são dados integrados? 
+categories: [data]
+keywords: []
+id: what-is-integranted-data
+---
+
+Chamamos de integrados os dados de conjuntos provenientes de diferentes fontes e sistemas, que foram harmonizados e unificados de forma estruturada e coesa. Essa integração permite que dados de diversas origens sejam agregados em uma única plataforma ou interface. 
+
+Todos os dados da BD e da assinatura Pro são integrados, ou seja, permitem análises e cruzamentos de informações de diferentes fontes em um mesmo ambiente. 
+
+Assim você pode, por exemplo, utilizar uma consulta SQL para cruzar dados de importações de determinado estado com seus principais indicadores socioeconômicos, tudo na mesma plataforma.  

next/content/bdPro/FAQ/pt/what-is-medium-frequency-data.md

@@ -0,0 +1,10 @@
+---
+question: O que são dados de média frequência BD Pro?
+categories: []
+keywords: []
+id: what-is-high-frequency-data
+---
+
+Consideramos como dados de média frequência aqueles que são atualizados mensalmente ou com uma frequência ainda maior, com atualização semanal ou até diária, como é o caso dos dados de cotações de ações, por exemplo.  
+
+Vale ressaltar que os dados BD Pro contam com uma estrutura de processamento e atualização automática. Isso possibilita uma maior frequência de atualização e a disponibilização dos dados sempre já tratados, padronizados e prontos para a análise.

next/docs/plan_token_handling.md

@@ -0,0 +1,24 @@
+# Plano de Implementação: Melhoria na Gestão de Tokens (Arquivado)
+
+Este plano foi gerado em 12/02/2026 para lidar com a futura alteração da expiração do JWT de 7 dias para 1 hora.
+
+## Objetivo
+Adaptar o frontend para suportar tokens de vida curta sem impactar a experiência do usuário, garantindo renovação automática e segurança aprimorada.
+
+## Resumo da Análise
+- **Estado Atual**: Tokens em cookies (7 dias), sem refresh automático global.
+- **Risco**: Se a validade cair para 1 hora, usuários serão deslogados ou encontrarão erros 401 constantemente.
+
+## Ações Propostas
+
+### 1. Interceptor no Axios (`axios.js`)
+- Adicionar um interceptor de erro que, ao receber `401 Unauthorized`, tente chamar a rota de refresh automaticamente antes de falhar.
+
+### 2. Melhoria na Rota de Refresh (`pages/api/user/refreshToken.js`)
+- Sincronizar a renovação do cookie `token` com o tempo de vida real retornado pelo backend.
+
+### 3. Segurança de Cookies
+- Recomenda-se usar `httpOnly: true` para evitar acesso via Javascript a tokens sensíveis.
+
+---
+*Este arquivo serve como referência para a implementação planejada para daqui a ~2 semanas.*