diff --git a/next/components/atoms/RoundedButton.js b/next/components/atoms/RoundedButton.js index fd8b1d72..e7003cda 100644 --- a/next/components/atoms/RoundedButton.js +++ b/next/components/atoms/RoundedButton.js @@ -17,6 +17,7 @@ export default function RoundedButton({ borderRadius="30px" boxShadow="0px 0.5px 0px 0px rgba(64, 60, 67, 0.16)" letterSpacing="0.5px" + color="#FFF" _hover={{ transform: "translateY(-3px)", ..._hover, diff --git a/next/components/organisms/Blog/Home.js b/next/components/organisms/Blog/Home.js index 63a522f8..aec5d0af 100644 --- a/next/components/organisms/Blog/Home.js +++ b/next/components/organisms/Blog/Home.js @@ -10,13 +10,13 @@ import { GridItem, Divider, } from "@chakra-ui/react"; - import { useEffect, useState } from "react"; import { useTranslation } from 'next-i18next'; import { categories } from "../../../pages/api/blog/categories"; import Link from "../../atoms/Link"; import FilterIcon from "../../../public/img/icons/filterIcon"; +import ChevronIcon from "../../../public/img/icons/chevronIcon"; export const dateToLocatePt = (date) => new Date(date).toLocaleString("pt-BR", { @@ -348,23 +348,49 @@ export function BlogGrid({ posts, category }) { borderWidth="2px" margin="80px 0 24px" /> - - - {categories?.[key] || t(key)} - + + {categories?.[key] || t(key)} + - - {value.map((post, index) => { - const itemsInLastRow = (value.length - 1) % 3 || 3; - const isInLastRow = index >= value.length - itemsInLastRow; + + Ver todos + + + + + {value.slice(0, 7).map((post, index) => { if (index === 0) { return ( @@ -408,9 +434,6 @@ export function BlogGrid({ posts, category }) { {posts.map((post, index) => { - const itemsInLastRow = (posts.length - 1) % 3 || 3; - const isInLastRow = index >= posts.length - itemsInLastRow; - if (index === 0) { return ( diff --git a/next/components/organisms/Blog/Slug.js b/next/components/organisms/Blog/Slug.js index 40793c35..35097aa8 100644 --- a/next/components/organisms/Blog/Slug.js +++ b/next/components/organisms/Blog/Slug.js @@ -243,11 +243,11 @@ function FigCaption(props) { return props.children ? ( {props.children} @@ -486,9 +486,9 @@ export const mdxComponents = { ul: (props) => , li: (props) => ( ), @@ -538,35 +538,38 @@ export const mdxComponents = { return ( “ {figcaption ? ( ) : null} diff --git a/next/components/organisms/componentsUserPage/PlansAndPayment.js b/next/components/organisms/componentsUserPage/PlansAndPayment.js index 8812c9e0..be3d6628 100644 --- a/next/components/organisms/componentsUserPage/PlansAndPayment.js +++ b/next/components/organisms/componentsUserPage/PlansAndPayment.js @@ -455,7 +455,7 @@ export default function PlansAndPayment ({ userData }) { maxWidth:"1008px", margin: "24px" }} - isCentered={{base: false, lg: true}} + isCentered={false} > +A Fundação sempre se orientou por dados e evidências, buscando em seus programas identificar e acompanhar os principais indicadores. Mas faltava um elemento de integração entre os dados das diversas iniciativas, permitindo maior inteligência organizacional e capacidade de análise. Foi esse passo que começamos a dar com a parceria com a BD. + + +### Mapeamento das escolas com melhores práticas de gestão + +Além de compreender o cenário atual da educação no Brasil, o uso de dados e indicadores disponibilizados pela BD auxiliou a Fundação a acompanhar e avaliar o impacto e resultados dos programas apoiados de maneira prática. Nossa equipe de engenharia de dados e de analistas idealizou e construiu painéis com informações abrangentes sobre as frentes de impacto da Fundação. + +Pelos painéis, ficou muito mais simples acompanhar indicadores atualizados e projeções da educação brasileira, o impacto dos programas apoiados, metas estabelecidas, localização de escolas impactadas, o perfil racial e de gênero da ocupação de cargos de liderança no governo federal, além de inúmeros outros projetos. Segundo o Diretor de Conhecimento, Dados e Pesquisa da Fundação Lemann, Daniel De Bonis, “o próprio processo de construção dos painéis foi uma forma de acionar e fortalecer a inteligência coletiva da Fundação, ao provocar as equipes multifuncionais a refletir sobre seus KPIs e as melhores formas de visualizar, interpretar e explorar as informações disponíveis, utilizando sempre a metodologia ágil para uma interação produtiva com a equipe da BD”. + +Isso é possível porque os painéis apresentam visualizações que envolvem dados públicos minuciosamente tratados e padronizados pela BD, como o Censo da Educação Básica (Inep), Avaliação Nacional de Alfabetização (ANA), Sistema Nacional de Avaliação da Educação Básica (Saeb), Portal da Transparência (CGU), PNAD (IBGE), ESTADIC e MUNIC (IBGE), e mais. + +Um exemplo mais recente da construção de painéis que auxiliam o acompanhamento desses importantes indicadores foi com os dados do Sistema de Avaliação da Educação Básica (Saeb). Daniel explica como a parceria possibilitou a análise desses dados de maneira ágil e prática: “Com apoio da BD pudemos, em tempo recorde, construir uma plataforma de análise dos dados do Saeb 2021. No mesmo dia da divulgação dos dados da avaliação educacional, os painéis estavam operacionais, permitindo aos times dos programas analisar o desempenho das redes de ensino com diferentes filtros e recortes.” + +--- + +Os dados dos principais indicadores educacionais tratados pela BD são abertos a todos: +- [Sistema de Avaliação da Educação Básica (Saeb)](https://basedosdados.org/dataset/e083c9a2-1cee-4342-bedc-535cbad6f3cd?table=0308fbe0-270c-4135-9115-ea1100f400f6) +- [Avaliação Nacional de Alfabetização (ANA)](https://basedosdados.org/dataset/140554cd-8062-4c9c-80fa-363cee3603e3?table=99597e72-0796-4de3-8542-f4fd8f3ccfa4) +- [Pesquisa Nacional por Amostra de Domicílios (PNAD)](https://basedosdados.org/dataset/0cde957f-1b58-425a-b6cd-ba1208515537?table=83062c5c-6b1f-4d54-8cf2-9f541e835bf0) +- [Censo da Educação Básica](https://basedosdados.org/dataset/dae21af4-4b6a-42f4-b94a-4c2061ea9de5?table=62f7bef8-36f3-4c9b-bc79-882a2ebbed8f) + +--- + +Para além dos dados públicos, foram organizados e tratados dados e indicadores relacionados aos próprios programas apoiados pela Fundação, integrando informações de diferentes naturezas e origens de forma articulada e compreensível para as equipes. Essa abordagem sistêmica tem sido chave para o fortalecimento de uma cultura orientada para dados e evidências, criando um vocabulário comum para tratar de indicadores, metas e pautando os processos de aprendizagem organizacional. Daniel explica também que “os painéis e análises têm sido ferramentas bastante importantes no processo decisório, ajudando as equipes a visualizar e compreender informações de forma mais ágil e com menos ruído.” + +### Mais autonomia na análise de dados e evidências + +A construção de uma cultura orientada para dados e evidências também demanda o desenvolvimento de competências analíticas em todo o time – uma necessidade ainda maior num contexto de implementação de uma estrutura matricial e de metodologia ágil, adotadas pela Fundação a partir de 2022. A BD assumiu papel fundamental neste processo, apoiando a equipe da Fundação Lemann com formações interativas sobre ferramentas de dados como [Metabase](https://www.metabase.com/) e [BigQuery](https://cloud.google.com/bigquery), bem como atividades formativas para orientar a exploração de conjuntos de dados específicos, como os do [Programa Internacional de Avaliação de Estudantes (Pisa)](https://basedosdados.org/dataset/programme-for-international-student-assessment?external_link=Baixar). + +A parceria entre a BD e a Fundação Lemann uniu equipes dedicadas a construir conhecimento, gerar insights e compreender cenários para desenvolver projetos que impulsionam ativamente o avanço da educação no Brasil e a formação de lideranças preparadas e com representatividade. Acreditamos que a tomada de decisão baseada em dados e evidências é uma ferramenta fundamental para implementar mudanças efetivas na sociedade e sabemos também que essa cultura começa conosco. + +Saiba mais sobre a Fundação Lemann [aqui](https://fundacaolemann.org.br/). diff --git a/next/content/caseStudies/pt/jota.md b/next/content/caseStudies/pt/jota.md new file mode 100644 index 00000000..7a8a3e70 --- /dev/null +++ b/next/content/caseStudies/pt/jota.md @@ -0,0 +1,49 @@ +--- +id: "jota" +displayTitle: "JOTA" +thumbnail: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/thumbnails/thumbnail_estudo_de_caso_jota.png" +title: "Plataforma traz mais transparência para a prestação de contas de candidaturas e partidos nas Eleições 2022" +img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/imagens/estudo_de_caso_jota.png" +imgDescription: "Foto: Tribunal Superior Eleitoral (TSE)" +description: "Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma Siga o Dinheiro auxiliou população e imprensa no monitoramento do financiamento de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral." +logo: { + img: "https://storage.googleapis.com/basedosdados-website/estudos_de_caso/logos/jota.svg", + width: 222, + height: 85 +} +about: "Empresa de jornalismo e tecnologia para tomadores de decisão que tem como missão tornar as instituições brasileiras mais transparentes e previsíveis." +resume: "Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma Siga o Dinheiro auxiliou população e imprensa no monitoramento do financiamento de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral." +sector: "Política" +--- + +Criada pela BD em parceria com o JOTA, empresa de jornalismo e tecnologia, a plataforma [Siga o Dinheiro](https://sigaodinheiro.org/) auxiliou população e imprensa no monitoramento das despesas e receitas de campanhas eleitorais nas eleições de 2022. O projeto se tornou uma importante ferramenta para a transparência pública e o combate à corrupção no processo eleitoral. + +## Resultados da parceria + +- Fornecimento de dados atualizados para coberturas jornalísticas das eleições e acompanhamento da sociedade; +- Produção de análises qualificadas sobre a prestação de contas nas eleições; +- Dados de despesas e receitas das eleições para apuração de mais de 20 reportagens publicadas em 5 veículos de comunicação diferentes. + +Construído com tecnologia de ponta para extrair e organizar automaticamente as informações do Tribunal Superior Eleitoral (TSE), o painel traz dados atualizados sobre o financiamento das eleições. A plataforma permite a seleção de diversos recortes a partir de filtros geográficos, raciais, de gênero e muito mais. + +## Siga o Dinheiro na apuração jornalística + +O projeto [Siga o Dinheiro](https://sigaodinheiro.org/) foi fundamental para mapear desigualdades e inconsistências no financiamento das eleições de 2022. A ferramenta foi utilizada na apuração de mais de 20 reportagens com temas como as [diferenças raciais e de gênero no financiamento de campanhas](https://www.jota.info/eleicoes/candidatos-brancos-a-camara-tiveram-em-media-o-dobro-de-recursos-dos-pretos-05102022), [o efeito da tecnologia no financiamento eleitoral](https://www.jota.info/opiniao-e-analise/colunas/siga-o-dinheiro/o-efeito-da-tecnologia-sobre-o-financiamento-eleitoral-30082022), [lacunas nas prestações de contas](https://www.jota.info/eleicoes/contas-de-campanha-mostravam-que-candidato-a-deputado-teria-recebido-r-400-milhoes-30082022), [candidatos que receberam mais recursos para suas campanhas](https://www.jota.info/eleicoes/quem-sao-os-candidatos-a-deputado-que-mais-receberam-recursos-de-campanha-10092022), entre outros. Para Kalleo Coura, editor executivo do JOTA em São Paulo, “os dados das prestações de contas das campanhas foram organizados de forma simples e intuitiva nos painéis da plataforma, o que possibilitou identificar inconsistências e tendências interessantes”. + +![Seção "Desigualdades" do painel Siga o Dinheiro](https://storage.googleapis.com/basedosdados-website/estudos_de_caso/paineis/painel_siga_o_dinheiro.png) + +O painel facilitou a apuração de reportagens que deixam explícitas as profundas desigualdades na distribuição de recursos para campanhas. Com filtros que permitem explorar a proporção de receitas e despesas entre os diferentes perfis de candidaturas, o painel possibilitou análises que identificaram a falta de recursos para candidaturas indígenas – [30% das candidaturas não receberam nenhum recurso para suas campanhas](https://www.jota.info/eleicoes/30-das-candidatas-indigenas-a-camara-nao-receberam-recursos-para-campanha-30092022) – e a disparidade entre os recursos destinados a candidatos brancos e pretos, com o [primeiro grupo acumulando o dobro no financiamento](https://www.jota.info/eleicoes/candidatos-brancos-a-camara-tiveram-em-media-o-dobro-de-recursos-dos-pretos-05102022). + +
+Durante a corrida eleitoral, foi substancial ter acesso à visualização do Siga o Dinheiro, que usou dados abertos da Justiça Eleitoral que nem sempre seriam facilmente combinados e cruzados para produzir conteúdo de interesse público. Na cobertura, essas informações ajudaram a embasar reportagens sobre os candidatos que mais receberam investimentos de recursos públicos para campanha, mas, principalmente, para mostrar as desigualdades regionais, partidárias, de gênero e raciais. Com dados apresentados pela plataforma, mostramos que candidatos brancos à Câmara dos Deputados tiveram em média o dobro de recursos dos pretos e que um quinto das mulheres não tinham recebido nem R$ 1 de seus partidos, por exemplo. +
+ +Além de ajudar a identificar tendências do financiamento das campanhas para cargos federais, a possibilidade de criar recortes regionais facilitou o [acompanhamento dos gastos em estados como Roraima](https://folhabv.com.br/noticia/ELEIcOES-2022/ELEIcOES-2022/Saiba-quem-recebeu-os-valores-mais-altos-para-fazer-campanha-em-RR/90559), por exemplo. A ferramenta ajudou também na identificação de irregularidades e erros nas prestações de contas de candidatos e partidos. Foi o caso do Partido Socialista Brasileiro (PSB), que declarou uma [receita de mais de R$ 400 milhões do Fundo Especial de Financiamento de Campanha do sindicalista Zé Francisco](https://www.jota.info/eleicoes/contas-de-campanha-mostravam-que-candidato-a-deputado-teria-recebido-r-400-milhoes-30082022), o que o colocaria na primeira posição entre os candidatos que mais receberam recursos públicos em toda a eleição de 2022. + +## Tecnologia de ponta trabalhando pela transparência e acessibilidade + +O painel foi desenvolvido através da combinação de técnicas de extração automatizada e de um rigoroso processo de tratamento e padronização de dados. Isso permitiu o acesso em tempo real às informações do Tribunal Superior Eleitoral (TSE), apresentadas em um formato intuitivo, onde os usuários podem pesquisar e criar seus próprios recortes com filtros por estado, partido, cargo, gênero, raça e mais. + +A BD também disponibiliza em sua plataforma os dados atualizados de receitas e despesas, possibilitando o download das tabelas tratadas ou o acesso por ferramentas de análise de dados, como SQL, Python e R. + +[Acesse os dados atualizados das eleições brasileiras](https://basedosdados.org/dataset/eef764df-bde8-4905-b115-6fc23b6ba9d6?table=2e204854-e453-4257-9fef-5e10f3ff1f56). diff --git a/next/pages/api/blog/categories.js b/next/pages/api/blog/categories.js index 2bef4876..7041919c 100644 --- a/next/pages/api/blog/categories.js +++ b/next/pages/api/blog/categories.js @@ -1,4 +1,4 @@ export const categories = { - analise: "Análise", - tutorial: "Tutorial" + analise: "Análises", + tutorial: "Tutoriais" } diff --git a/next/pages/api/caseStudies/index.js b/next/pages/api/caseStudies/index.js new file mode 100644 index 00000000..856e456f --- /dev/null +++ b/next/pages/api/caseStudies/index.js @@ -0,0 +1,77 @@ +import path from "path"; +import fs from "fs/promises"; +import matter from "gray-matter"; +import { serialize } from "next-mdx-remote/serialize"; +import remarkGfm from "remark-gfm"; +import rehypeSlug from "rehype-slug"; +import { fromMarkdown } from "mdast-util-from-markdown"; +import { visit } from "unist-util-visit"; + +const root = process.cwd(); + +export async function getAllCaseStudies(locale = 'pt') { + const caseStudiesDirRoot = path.join(root, `content/caseStudies/${locale}`); + const caseStudiesDir = await fs.readdir(caseStudiesDirRoot, "utf-8"); + + const caseStudies = await Promise.all( + caseStudiesDir.map(async (file) => { + const fullpath = path.join(caseStudiesDirRoot, file); + const content = await fs.readFile(fullpath, "utf-8"); + + const { data: metadata, content: caseStudiesContent } = matter(content); + + return { + ...metadata, + content: caseStudiesContent, + }; + }), + ); + + return caseStudies; +} + +export async function getCaseStudiesById(id, locale = 'pt') { + const caseStudiesDirRoot = path.join(root, `content/caseStudies/${locale}`); + + const filepath = path.join(caseStudiesDirRoot, `${id}.md`); + return await fs.readFile(filepath, "utf-8"); +} + +const remarkPluginCaption = () => (tree) => + visit( + tree, + (node) => + ["Image", "Video", "Embed", "Blockquote"].includes(node.name) && + node.attributes.find(({ name }) => name === "caption"), + (node) => { + const caption = node.attributes.filter(({ name }) => name === "caption"); + const tree = fromMarkdown(caption[0].value); + const children = tree.children.map((node) => ({ + ...node, + type: "figcaption", + })); + + if (node.name === "Embed") { + node.children[0].children = children; + } else if (node.name === "Blockquote") { + node.children = [...children, ...node.children]; + } else { + node.children = children; + } + + node.attributes = node.attributes.filter( + ({ name }) => name !== "caption", + ); + }, + ); + +export async function serializeCaseStudies(content) { + const mdxSource = await serialize(content, { + parseFrontmatter: true, + mdxOptions: { + remarkPlugins: [remarkGfm, remarkPluginCaption], + rehypePlugins: [rehypeSlug], + }, + }); + return mdxSource; +} diff --git a/next/pages/blog/[slug].js b/next/pages/blog/[slug].js index 9dac4d09..081a0eed 100644 --- a/next/pages/blog/[slug].js +++ b/next/pages/blog/[slug].js @@ -1,5 +1,6 @@ import { Box, + Divider, Text } from "@chakra-ui/react"; import Head from "next/head"; @@ -13,7 +14,6 @@ import Link from "../../components/atoms/Link"; import { Header, Toc, - Contribute, mdxComponents, } from "../../components/organisms/Blog/Slug"; @@ -143,6 +143,12 @@ export default function Post({ slug, mdxSource, headings }) { display="flex" flexDirection="column" > + ) : null} - - - diff --git a/next/pages/case-studies/[id].js b/next/pages/case-studies/[id].js index 2eac74d5..cc255372 100644 --- a/next/pages/case-studies/[id].js +++ b/next/pages/case-studies/[id].js @@ -4,91 +4,88 @@ import { HStack, Box, Skeleton, + Text } from "@chakra-ui/react"; import Image from 'next/image'; -import { useState, useEffect } from "react"; +import { MDXRemote } from "next-mdx-remote"; import Head from "next/head"; import { useRouter } from "next/router"; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; - import { MainPageTemplate } from "../../components/templates/main"; -import { useCheckMobile } from "../../hooks/useCheckMobile.hook"; -import { CaseStudiesContent } from "../../content/caseStudies"; + +import { + getAllCaseStudies, + getCaseStudiesById, + serializeCaseStudies +} from "../api/caseStudies" + +import { + mdxComponents +} from "../../components/organisms/Blog/Slug" + +import ChevronIcon from "../../public/img/icons/chevronIcon"; +import Button from "../../components/atoms/Button"; import Link from "../../components/atoms/Link"; -import SectionText from "../../components/atoms/SectionText"; -import Display from "../../components/atoms/Display"; -import BodyText from "../../components/atoms/BodyText"; -import RoundedButton from "../../components/atoms/RoundedButton"; import styles from "../../styles/caseStudies.module.css"; export async function getStaticProps({ params, locale }) { - const caseStudy = CaseStudiesContent.find((res) => res.id === params.id); + const { id } = params; + + const content = await getCaseStudiesById(id, locale); + const serialize = await serializeCaseStudies(content); + return { props: { + serialize, ...(await serverSideTranslations(locale, ['common', 'menu', 'caseStudies'])), - ...caseStudy, }, revalidate: 30 } } -export async function getStaticPaths(context) { +export async function getStaticPaths() { + const allCaseStudies = await getAllCaseStudies(); + return { - paths: CaseStudiesContent.map((elm) => { - return {params: { id : elm.id }} + paths: allCaseStudies.map(({ id }) => { + return {params: { id }} }), fallback: false } } -export default function CaseStudies ({ - title, - displayTitle, - thumbnail, - img, - imgDescription, - description, - logo, - about, - sector, - body -}) { +export default function CaseStudies ({ serialize }) { const { t } = useTranslation('caseStudies'); const router = useRouter(); - const [isMobileMod, setIsMobileMod] = useState(false) - const isMobile = useCheckMobile(); - - useEffect(() => { - setIsMobileMod(isMobile) - }, [isMobile]) + const { frontmatter } = serialize; return ( - {t('pageTitle', { title: displayTitle })} + {t('pageTitle', { title: frontmatter.displayTitle || "" })} @@ -98,49 +95,69 @@ export default function CaseStudies ({ maxWidth="1264px" margin="50px auto auto" > - {!isMobileMod && ( - - {t('backLink')} - - )} - - {isMobileMod && - {title} - } - + + + {t('backLink')} + + + {frontmatter?.title || ""} + - {!isMobileMod && - {title} - } + {frontmatter?.title || ""} - {img.length > 0 ? + {frontmatter.img ? {displayTitle} @@ -149,29 +166,32 @@ export default function CaseStudies ({ } - {imgDescription && - - {imgDescription} - + {frontmatter.imgDescription} + } - + - {logo?.img.length > 0 ? + {frontmatter?.logo?.img ? {displayTitle} : } - Sobre - - {about} - + + Sobre + + + + {frontmatter?.about || ""} + + + + Setor + - Setor - - {sector} - + + {frontmatter?.sector || ""} + - + {t('contactText')} - - + + - - -
- - + + + diff --git a/next/pages/dataset/[dataset].js b/next/pages/dataset/[dataset].js index 0919aa41..18cf80fd 100644 --- a/next/pages/dataset/[dataset].js +++ b/next/pages/dataset/[dataset].js @@ -49,14 +49,14 @@ export async function getStaticProps(context) { console.error("Fetch error:", error.message); } - const infoId = "de-olho-na-camara-conheca-os-dados-que-te-ajudam-a-monitorar-a-camara-dos-deputados" - const content = await getPostBySlug(infoId); - const serialize = await serializePost(content); + // const infoIdMarkdown = "" + // const content = await getPostBySlug(infoIdMarkdown); + // const serialize = await serializePost(content); const props = { ...(await serverSideTranslations(locale, ['dataset', 'common', 'menu', 'prices'])), - ...serialize, - infoId, + // ...serialize, + // infoIdMarkdown, dataset, }; @@ -276,14 +276,7 @@ export default function DatasetPage ({ dataset, mdxSource, headings, infoId }) { {t('data')} - - - Informações + @@ -305,7 +298,7 @@ export default function DatasetPage ({ dataset, mdxSource, headings, infoId }) { - + {/* */} diff --git a/next/pages/faq.js b/next/pages/faq.js index 3d28134a..a80e1ecb 100644 --- a/next/pages/faq.js +++ b/next/pages/faq.js @@ -30,7 +30,7 @@ import SearchIcon from "../public/img/icons/searchIcon"; import styles from "../styles/faq.module.css"; export async function getStaticProps({ locale }) { - const faqs = await getAllFAQs() + const faqs = await getAllFAQs(locale) return { props: { diff --git a/next/pages/services.js b/next/pages/services.js index 31fcefab..52d9a39b 100644 --- a/next/pages/services.js +++ b/next/pages/services.js @@ -10,24 +10,31 @@ import ImageNext from "next/image"; import Head from "next/head"; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; -import { CaseStudiesPaged } from "../content/caseStudies"; +import { isMobileMod, useCheckMobile } from "../hooks/useCheckMobile.hook"; +import { withPages } from "../hooks/pages.hook"; +import { MainPageTemplate } from "../components/templates/main"; + +import { + getAllCaseStudies +} from "./api/caseStudies" + import Display from "../components/atoms/Display"; import BodyText from "../components/atoms/BodyText"; import Link from "../components/atoms/Link"; import RoundedButton from "../components/atoms/RoundedButton"; import SectionText from "../components/atoms/SectionText"; import SectionTitle from "../components/atoms/SectionTitle"; -import { MainPageTemplate } from "../components/templates/main"; -import { withPages } from "../hooks/pages.hook"; -import { isMobileMod, useCheckMobile } from "../hooks/useCheckMobile.hook"; -import BDLogoLabImage from "../public/img/logos/bd_logo_lab" +import BDLogoLabImage from "../public/img/logos/bd_logo_lab" import CheckIcon from "../public/img/icons/checkIcon"; export async function getStaticProps({ locale }) { + const caseStudiesContent = await getAllCaseStudies(locale) + return { props: { + caseStudiesContent, ...(await serverSideTranslations(locale, ['common', 'services', 'menu'])), ...(await withPages()), }, @@ -207,13 +214,13 @@ function WorkflowBox({ order, title, subtitle, children}) { ) } -function CaseStudies ({}) { +function CaseStudies ({ data }) { const { t } = useTranslation('services'); const [CaseStudiesPages, setCaseStudiesPages] = useState([]) useEffect(() => { - setCaseStudiesPages(CaseStudiesPaged()) - },[]) + setCaseStudiesPages(data) + },[data]) return ( - {elm?.img.length > 0 ? + {elm?.img ? - {elm?.logo.img.length > 0 ? + {elm?.logo?.img ? - {elm.resume.slice(0,useCheckMobile() ? 160 :178)+"..."} + {elm?.resume && elm?.resume.slice(0,useCheckMobile() ? 160 :178)+"..."} - +