diff --git a/bdpro-lp.md b/bdpro-lp.md new file mode 100644 index 00000000..fc23b6ba --- /dev/null +++ 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/components/molecules/Card.js b/next/components/molecules/Card.js index e25ab0e7..481bb07b 100644 --- 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} > { + 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 ( + + OpenCloseQuestion()} + > + + {question} + + + + + + {answer} + + + + + ) +} diff --git a/next/content/bdPro/FAQ/pt/access-bases.md b/next/content/bdPro/FAQ/pt/access-bases.md new file mode 100644 index 00000000..cc198be3 --- /dev/null +++ b/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). diff --git a/next/content/bdPro/FAQ/pt/access-to-recent-data.md b/next/content/bdPro/FAQ/pt/access-to-recent-data.md new file mode 100644 index 00000000..d793211d --- /dev/null +++ b/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. diff --git a/next/content/bdPro/FAQ/pt/data-access-limit.md b/next/content/bdPro/FAQ/pt/data-access-limit.md new file mode 100644 index 00000000..aae943f9 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/difference-open-pro copy.md b/next/content/bdPro/FAQ/pt/difference-open-pro copy.md new file mode 100644 index 00000000..0dca01da --- /dev/null +++ b/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) diff --git a/next/content/bdPro/FAQ/pt/difference-open-pro.md b/next/content/bdPro/FAQ/pt/difference-open-pro.md new file mode 100644 index 00000000..0e0095d1 --- /dev/null +++ b/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) diff --git a/next/content/bdPro/FAQ/pt/extra-billing.md b/next/content/bdPro/FAQ/pt/extra-billing.md new file mode 100644 index 00000000..b86475bd --- /dev/null +++ b/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) \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/how-to-access-data.md b/next/content/bdPro/FAQ/pt/how-to-access-data.md new file mode 100644 index 00000000..69870880 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/how-to-create-bq-project.md b/next/content/bdPro/FAQ/pt/how-to-create-bq-project.md new file mode 100644 index 00000000..d58bc1c7 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/how-to-use-python-r-stata.md b/next/content/bdPro/FAQ/pt/how-to-use-python-r-stata.md new file mode 100644 index 00000000..e3870a1c --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/what-is-bdpro.md b/next/content/bdPro/FAQ/pt/what-is-bdpro.md new file mode 100644 index 00000000..dd832e5f --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/what-is-integranted-data.md b/next/content/bdPro/FAQ/pt/what-is-integranted-data.md new file mode 100644 index 00000000..56ae2338 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/content/bdPro/FAQ/pt/what-is-medium-frequency-data.md b/next/content/bdPro/FAQ/pt/what-is-medium-frequency-data.md new file mode 100644 index 00000000..1e55b371 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/next/docs/plan_token_handling.md b/next/docs/plan_token_handling.md new file mode 100644 index 00000000..46b88da5 --- /dev/null +++ b/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.* diff --git a/next/pages/bdpro.js b/next/pages/bdpro.js new file mode 100644 index 00000000..40be4c1c --- /dev/null +++ b/next/pages/bdpro.js @@ -0,0 +1,493 @@ +import { useState } from "react"; +import { + Box, + VStack, + Tabs, + TabList, + TabPanels, + TabPanel, +} from "@chakra-ui/react"; +import Head from "next/head"; +import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; +import { useTranslation } from 'next-i18next'; +import { MainPageTemplate } from "../components/templates/main"; +import { withPages } from "../hooks/pages.hook"; +import { isMobileMod } from "../hooks/useCheckMobile.hook"; + +import { getAllFAQs } from "./api/faqs"; + +import Display from "../components/atoms/Text/Display"; +import TitleText from "../components/atoms/Text/TitleText"; +import BodyText from "../components/atoms/Text/BodyText"; +import MentionSection from "../components/molecules/MentionSection"; +import GreenTab from "../components/atoms/GreenTab"; +import Carousel from "../components/atoms/Carousel"; +import { SectionPrice } from "../pages/prices"; +import BDLogoProImage from "../public/img/logos/bd_logo_pro"; +import QuestionsBox from "../components/molecules/QuestionsBox"; + +import styles from "../styles/bdpro.module.css"; +import stylesFaq from "../styles/faq.module.css"; + +export async function getStaticProps({ locale }) { + const faqs = await getAllFAQs(locale, "bdPro/FAQ") + const pagesProps = await withPages(); + return { + props: { + ...pagesProps, + ...(await serverSideTranslations(locale, ['common', 'menu', 'bdpro', 'prices'])), + faqs + }, + revalidate: 30 + }; +} + +function HighlightBox({ title, description, cn, isActive, onActivate, onDeactivate }) { + const isMobile = isMobileMod(); + + return ( + + + + {title} + + + + !isMobile && onActivate()} + onMouseLeave={() => !isMobile && onDeactivate()} + onClick={() => { + if (isMobile) { + isActive ? onDeactivate() : onActivate(); + } + }} + padding={isActive ? "12px 16px" : "10px 16px"} + color="#FFFFFF" + backgroundColor="#161d19bf" + border="1px solid #ffffff1a" + borderRadius="14px" + textAlign="center" + transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" + backdropFilter="blur(4px)" + width="max-content" + maxWidth="260px" + zIndex={isActive ? 10 : 1} + _hover={{ + borderColor: "#29b47366", + background: "#29b47314", + color: "#29b473", + boxShadow: "0 8px 32px rgba(41,180,115,0.15)", + }} + > + + {isActive ? description : title} + + + + ); +} + +function Hero({ t }) { + const [activeHightlight, setActiveHightlight] = useState(null); + + const highlights = [ + { key: 'cnpjs', top: "10%", left: "26%", cn: "cnpjs" }, + { key: 'obras', top: "22%", right: "16%", cn: "obras" }, + { key: 'datasus', bottom: "50%", left: "3%", transform: "translateY(-50%)", cn: "datasus" }, + { key: 'empregos', bottom: "18%", right: "4%", transform: "translateY(-50%)", cn: "empregos" }, + { key: 'comex', top: "76%", left: "6%", transform: "translateY(-50%)", cn: "comex" }, + ]; + + return ( + + + + + + {t('hero.title',{ returnObjects: true })[0]} + {t('hero.title',{ returnObjects: true })[1]} + + + {t('hero.description')} + + + {t('hero.stats')} + + + + + {highlights.map((h) => ( + + setActiveHightlight(h.key)} + onDeactivate={() => setActiveHightlight(null)} + /> + + ))} + + + + {highlights.map((h) => ( + setActiveHightlight(h.key)} + onDeactivate={() => setActiveHightlight(null)} + /> + ))} + + + ); +} + +function Presentation({ t }) { + const tabs = [1, 2, 3]; + const isMobile = isMobileMod(); + + const videoUrls = { + 1: "https://storage.googleapis.com/basedosdados-website/bdpro/bigquery-access.mp4", + 2: "https://storage.googleapis.com/basedosdados-website/bdpro/python-r-clients.mp4", + 3: "https://storage.googleapis.com/basedosdados-website/bdpro/updates-alerts.mp4", + } + + return ( + + + {t('presentation.title')} + + + + {tabs.map((i) => ( + + {t(`presentation.tabs.tab${i}.label`)} + + ))} + + + {tabs.map((i) => ( + + + {t(`presentation.tabs.tab${i}.description`)} + + + + + + + ))} + + + + ); +} + +function Testimonials({ t }) { + const isMobile = isMobileMod(); + const testimonialKeys = ["t1", "t2"]; + + return ( + + + {t('testimonials.title')} + + + + + {testimonialKeys.map((key) => ( + + + + ))} + + + + ); +} + +function PricingSection({ t }) { + const isMobile = isMobileMod(); + + return ( + + + {t('prices:comparePlans')} + + + + ); +} + +function FAQ({ t, faqs }) { + const isMobile = isMobileMod(); + + return ( + + + {t('faq.title')} + + + + {faqs && faqs.map((elm, i) => ( + + ))} + + + ); +} + +export default function BDProPage({ faqs }) { + const { t } = useTranslation(['bdpro', 'prices']); + + return ( + + + {t('head.pageTitle')} + + + + + + + + + ); +} diff --git a/next/pages/faq.js b/next/pages/faq.js index 2e6805fc..c440c31f 100644 --- a/next/pages/faq.js +++ b/next/pages/faq.js @@ -2,15 +2,11 @@ import { Box, VStack, Stack, - Divider, - Collapse, } from "@chakra-ui/react"; import Link from "../components/atoms/Link"; import Head from "next/head"; import FuzzySearch from 'fuzzy-search'; import { useEffect, useState } from "react"; -import { useRouter } from "next/router"; -import ReactMarkdown from "react-markdown"; import { useTranslation } from 'next-i18next'; import Display from "../components/atoms/Text/Display"; import LabelText from "../components/atoms/Text/LabelText"; @@ -18,6 +14,7 @@ import BodyText from "../components/atoms/Text/BodyText"; import { MainPageTemplate } from "../components/templates/main"; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { DebouncedSimpleControlledInput } from "../components/atoms/ControlledInput"; +import QuestionsBox from "../components/molecules/QuestionsBox"; import { getAllFAQs, @@ -25,7 +22,6 @@ import { import CrossIcon from "../public/img/icons/crossIcon"; import SearchIcon from "../public/img/icons/searchIcon"; -import styles from "../styles/faq.module.css"; export async function getStaticProps({ locale }) { const faqs = await getAllFAQs(locale) @@ -39,80 +35,6 @@ export async function getStaticProps({ locale }) { } } -const QuestionsBox = ({ question, answer, id, active }) => { - const [isActive, setIsActive] = useState(false) - const router = useRouter() - - const scrollFocus = (idElement) => { - const targetElement = document.getElementById(idElement).getBoundingClientRect() - const heightScreen = window.innerHeight - const positionTarget = targetElement.top - - window.scrollTo(0, positionTarget - (heightScreen/2)) - } - - useEffect(() => { - setIsActive(false) - },[active]) - - useEffect(() => { - if(router.asPath === `/faq#${id}`) return setIsActive(true) - },[id]) - - useEffect(() => { - if(router.asPath === `/faq#${id}`) return scrollFocus(id) - },[isActive]) - - const OpenCloseQuestion = () => { - setIsActive(!isActive) - } - - return ( - - OpenCloseQuestion()} - > - - {question} - - - - - - {answer} - - - - - ) -} - export default function FAQ({ faqs }) { const { t } = useTranslation('faq'); const [allQuestions, setAllQuestions] = useState([]); diff --git a/next/pages/services.js b/next/pages/services.js index 0089efc6..9bd9712f 100644 --- a/next/pages/services.js +++ b/next/pages/services.js @@ -5,14 +5,10 @@ import { Grid, GridItem, Box, - Collapse, - Divider } from "@chakra-ui/react"; -import React, { useRef, useEffect, useState } from "react"; -import { useRouter } from "next/router"; +import { useRef, useEffect, useState } from "react"; import Image from "next/image"; import Head from "next/head"; -import ReactMarkdown from "react-markdown"; import { useTranslation, Trans } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { triggerGAEvent } from "../utils"; @@ -40,8 +36,7 @@ import RobotIcon from "../public/img/icons/robotIcon"; import SchoolIcon from "../public/img/icons/schoolIcon"; import ChevronIcon from "../public/img/icons/chevronIcon"; import ReturnIcon from "../public/img/icons/returnIcon"; -import CrossIcon from "../public/img/icons/crossIcon"; -import styles from "../styles/faq.module.css"; +import QuestionsBox from "../components/molecules/QuestionsBox"; export async function getStaticProps({ locale }) { const faqs = await getAllFAQs(locale, "services/FAQ") @@ -252,80 +247,6 @@ const Section = ({ ) } -const QuestionsBox = ({ question, answer, id, active }) => { - const [isActive, setIsActive] = useState(false) - const router = useRouter() - - const scrollFocus = (idElement) => { - const targetElement = document.getElementById(idElement).getBoundingClientRect() - const heightScreen = window.innerHeight - const positionTarget = targetElement.top - - window.scrollTo(0, positionTarget - (heightScreen/2)) - } - - useEffect(() => { - setIsActive(false) - },[active]) - - useEffect(() => { - if(router.asPath === `/services#${id}`) return setIsActive(true) - },[id]) - - useEffect(() => { - if(router.asPath === `/services#${id}`) return scrollFocus(id) - },[isActive]) - - const OpenCloseQuestion = () => { - setIsActive(!isActive) - } - - return ( - - OpenCloseQuestion()} - > - - {question} - - - - - - {answer} - - - - - ) -} - export default function Services({ faqs }) { const { t } = useTranslation('services'); const [isSticky, setIsSticky] = useState(false); diff --git a/next/public/locales/pt/bdpro.json b/next/public/locales/pt/bdpro.json new file mode 100644 index 00000000..4870cbf0 --- /dev/null +++ b/next/public/locales/pt/bdpro.json @@ -0,0 +1,68 @@ +{ + "head": { + "pageTitle": "BD Pro - Base dos Dados", + "metaTitle": "BD Pro - Base dos Dados" + }, + "hero": { + "title": ["Dados públicos", "tratados e sempre atualizados"], + "description": "A assinatura de dados com tratamento e atualização automática. Foque na análise, enquanto a gente garante que os dados estejam frescos e prontos para uso. Assine e nos ajude a manter o maior acervo público de dados tratados no Brasil.", + "stats": "Aceleramos o trabalho de mais de 25 mil pesquisadores, servidores públicos e empresas mensalmente", + "highlights": { + "cnpjs": { + "title": "Cadastros de CNPJs", + "description": "Dados de cadastrais de todas empresas do Brasil atualizados mensalmente" + }, + "obras": { + "title": "Cadastros de Obras", + "description": "Cadastro de obras da Receita Federal atualizados diariamente" + }, + "datasus": { + "title": "Cadastros do Datasus", + "description": "Dados dos principais sistemas do Datasus (SIA, CNES, SIH...) atualizados mensalmente" + }, + "empregos": { + "title": "Cadastro geral de empregos", + "description": "Dados do CAGED atualizados mensalmente" + }, + "comex": { + "title": "Comex Stat", + "description": "Dados de comércio exterior atualizados mensalmente" + } + } + }, + "presentation": { + "title": "Como funciona nosso produto?", + "tabs": { + "tab1": { + "label": "Acesso os dados no BigQuery", + "description": "Consulte os dados diretamente no Big Query com SQL" + }, + "tab2": { + "label": "Integração direta com Python e R", + "description": "Acesse os dados direto no seu ambiente de trabalho com nossos pacotes Python e R" + }, + "tab3": { + "label": "Alertas e notificações de atualização", + "description": "Receba um email assim que a tabela fora atualizada na BD" + } + } + }, + "testimonials": { + "title": "Quem usa a Base dos Dados", + "list": { + "t1": { + "name": "Fernando Barbalho", + "role": "Conselheiro Técnico do Vice-Presidente da República", + "text": "Costumo usar a plataforma da Base dos Dados para buscar dados de municípios, principalmente aqueles que são mais estáveis, tais como séries históricas de população. Uso também para dados de CNPJ e outros conjuntos muito grandes que seriam difíceis remontar em um ambiente isolado. A facilidade de usar comandos SQL ajuda no cruzamento e agregação de dados." + }, + "t2": { + "name": "Luiz Fernando Toledo", + "role": "Repórter na BBC", + "text": "Acabo fazendo perguntas mais complexas nas pautas porque sei que o trabalho de análise de dados não será tão complicado graças a essas ferramentas que vocês disponibilizam." + } + } + }, + "faq": { + "title": "Dúvidas Frequentes - FAQ" + } +} \ No newline at end of file diff --git a/next/styles/bdpro.module.css b/next/styles/bdpro.module.css new file mode 100644 index 00000000..abcfacad --- /dev/null +++ b/next/styles/bdpro.module.css @@ -0,0 +1,73 @@ +.float-pill { + animation: floatY 5s ease-in-out infinite; +} + +.float-pill:hover { + animation-play-state: paused; +} + +.cnpjs { + animation-delay: 0s; +} + +.obras { + animation-delay: 1.2s; +} + +.datasus { + animation-delay: 2.1s; + animation-name: floatX; +} + +.empregos { + animation-delay: .7s; + animation-name: floatX; +} + +.comex { + animation-delay: 1.2s; + animation-name: floatX; +} + +.testimonials :global(.swiper-pagination-bullet) { + background-color: #FFFFFF; +} + +.testimonials :global(.swiper-slide) { + opacity: 0 !important; + transition: opacity 0.5s ease; +} + +.testimonials :global(.swiper-slide-active) { + opacity: 1 !important; +} + +.testimonials :global(.swiper) { + padding: 0 !important; +} + +.testimonials :global(.swiper-button-next), +.testimonials :global(.swiper-button-prev) { + display: none; +} + + +@keyframes floatY { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-8px); + } +} + +@keyframes floatX { + 0%, + 100% { + transform: translateX(0px); + } + 50% { + transform: translateX(-6px); + } +} \ No newline at end of file