feat: add last technologies and show 8 most liked (#1237)

* feat: add last technologies and show 8 most liked * fix: margin top on technologies
ufersa · Aug 9, 2024 · 291abbe · 291abbe
1 parent 087427f
commit 291abbe
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 16 deletions.
diff --git 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
@@ -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
 				</ButtonsWrapper>
 			)}
 
+			{!!lastTechnologies?.length && (
+				<TechnologiesSection>
+					<SolutionsSection
+						header={t('common:lastTechnologies')}
+						data={lastTechnologies}
+						bgColor={colors.lightGray4}
+						type="technology"
+						padding="0rem 5%"
+					/>
+				</TechnologiesSection>
+			)}
+
 			{!!technologies?.length && (
 				<TechnologiesSection>
 					<SolutionsSection
@@ -130,13 +149,22 @@ Home.getInitialProps = async ({ req }) => {
 
 	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
@@ -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"
-}
+}
diff --git 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"
-}
+}