From 291abbe772d2a882f6460e0a30897d72eddec348 Mon Sep 17 00:00:00 2001 From: Marcos Tullyo Date: Fri, 9 Aug 2024 17:41:00 -0300 Subject: [PATCH] feat: add last technologies and show 8 most liked (#1237) * feat: add last technologies and show 8 most liked * fix: margin top on technologies --- .../web/components/SolutionsSection/styles.js | 5 +- packages/web/pages/index.js | 53 ++++++++++++++----- .../web/public/static/locales/en/common.json | 3 +- .../web/public/static/locales/pt/common.json | 3 +- 4 files changed, 48 insertions(+), 16 deletions(-) diff --git a/packages/web/components/SolutionsSection/styles.js b/packages/web/components/SolutionsSection/styles.js index 5cc30857d..cb7f6f633 100644 --- a/packages/web/components/SolutionsSection/styles.js +++ b/packages/web/components/SolutionsSection/styles.js @@ -2,12 +2,15 @@ import styled, { css } from 'styled-components'; const cardsGridStyles = css` display: grid; - grid-template-columns: repeat(auto-fit, min(27rem, 100%)); + grid-template-columns: repeat(4, minmax(27rem, 27rem)); grid-gap: 5rem 3rem; justify-content: center; @media (max-width: ${({ theme }) => theme.screens.medium}px) { padding: 0 2rem; } + @media (max-width: ${({ theme }) => theme.screens.large}px) { + grid-template-columns: repeat(auto-fit, minmax(27rem, 27rem)); + } .ais-Hits-item { display: flex; diff --git a/packages/web/pages/index.js b/packages/web/pages/index.js index c731d4768..6c52440d3 100644 --- a/packages/web/pages/index.js +++ b/packages/web/pages/index.js @@ -1,19 +1,26 @@ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; import useTranslation from 'next-translate/useTranslation'; -import styled, { css } from 'styled-components'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import Head from '../components/head'; +import PropTypes from 'prop-types'; +import { useEffect } from 'react'; +import styled, { css } from 'styled-components'; import { RectangularButton } from '../components/Button'; +import Head from '../components/head'; import { Hero } from '../components/Hero'; import { SolutionsSection } from '../components/SolutionsSection'; +import { toast } from '../components/Toast'; import { useTheme } from '../hooks'; +import { apiPost, apiPut, getServices, getTechnologies } from '../services'; import { internal as internalPages } from '../utils/enums/pages.enum'; -import { getServices, apiPost, apiPut, getTechnologies } from '../services'; -import { toast } from '../components/Toast'; -const Home = ({ emailConfirmation, changeEmail, technologies, services, heroImage }) => { +const Home = ({ + emailConfirmation, + changeEmail, + technologies, + lastTechnologies, + services, + heroImage, +}) => { const { colors } = useTheme(); const { t } = useTranslation(['common', 'pages']); const router = useRouter(); @@ -77,6 +84,18 @@ const Home = ({ emailConfirmation, changeEmail, technologies, services, heroImag )} + {!!lastTechnologies?.length && ( + + + + )} + {!!technologies?.length && ( { const technologies = await getTechnologies({ embed: true, - perPage: 4, + perPage: 8, orderBy: 'likes', order: 'DESC', status: 'published', taxonomy: 'category', }); + const lastTechnologies = await getTechnologies({ + embed: true, + perPage: 4, + orderBy: 'created_at', + order: 'DESC', + status: 'published', + taxonomy: 'category', + }); + const services = await getServices({ perPage: 4, orderBy: 'likes', @@ -150,6 +178,7 @@ Home.getInitialProps = async ({ req }) => { emailConfirmation, changeEmail, technologies, + lastTechnologies, services, heroImage: `/hero/${heroImgs[heroIndexImg]}`, }; @@ -158,6 +187,7 @@ Home.getInitialProps = async ({ req }) => { Home.propTypes = { emailConfirmation: PropTypes.bool, technologies: PropTypes.arrayOf(PropTypes.object), + lastTechnologies: PropTypes.arrayOf(PropTypes.object), services: PropTypes.arrayOf(PropTypes.object), changeEmail: PropTypes.bool, heroImage: PropTypes.string.isRequired, @@ -166,6 +196,7 @@ Home.propTypes = { Home.defaultProps = { emailConfirmation: false, technologies: [], + lastTechnologies: [], services: [], changeEmail: false, }; @@ -199,10 +230,6 @@ const ButtonsContainer = styled.div` `} `; -const TechnologiesSection = styled.div` - > div { - margin-top: -48px; - } -`; +const TechnologiesSection = styled.div``; export default Home; diff --git a/packages/web/public/static/locales/en/common.json b/packages/web/public/static/locales/en/common.json index c4d65059b..92f9247e6 100644 --- a/packages/web/public/static/locales/en/common.json +++ b/packages/web/public/static/locales/en/common.json @@ -16,6 +16,7 @@ "enterHere": "Enter Here", "featuredServices": "Featured services", "featuredTechnologies": "Featured technologies", + "lastTechnologies": "Last technologies", "filters": "Filters", "forgotPassword": "Forgot the password", "fullName": "Full Name", @@ -57,4 +58,4 @@ "verifiedEmail": "Account activated, login to continue.", "wait": "Wait", "yes": "Yes" -} \ No newline at end of file +} diff --git a/packages/web/public/static/locales/pt/common.json b/packages/web/public/static/locales/pt/common.json index 19c49641f..48d7bea24 100644 --- a/packages/web/public/static/locales/pt/common.json +++ b/packages/web/public/static/locales/pt/common.json @@ -16,6 +16,7 @@ "enterHere": "Entre aqui", "featuredServices": "Serviços em destaque", "featuredTechnologies": "Tecnologias em destaque", + "lastTechnologies": "Tecnologias recentes", "filters": "Filtros", "forgotPassword": "Esqueci minha senha", "fullName": "Nome completo", @@ -57,4 +58,4 @@ "verifiedEmail": "Conta ativada, faça o login para continuar.", "wait": "Aguarde", "yes": "Sim" -} \ No newline at end of file +}