feat: add footer logos

packages/web/components/Footer/Footer.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import Proptypes from 'prop-types';
 import { FaFacebookF, FaTwitter, FaInstagram, FaLinkedin, FaYoutube } from 'react-icons/fa';
 import { Link } from '../Link';
@@ -22,6 +21,7 @@ import {
 	SiteSocketContainer,
 	SiteSocketList,
 	SiteSocketListItem,
+	LogosContainer,
 } from './styles';
 
 const Footer = ({ isAbout }) => (
@@ -176,10 +176,10 @@ const Footer = ({ isAbout }) => (
 						</SiteInfoListItem>
 						{/* <SiteInfoListItem>
 							<Link href={internalPages.ideas}>Banco de Ideias</Link>
-						</SiteInfoListItem>*/}
+						</SiteInfoListItem> */}
 						<SiteInfoListItem>
 							<Link href={internalPages.announcements}>Banco de Editais</Link>
-						</SiteInfoListItem> 
+						</SiteInfoListItem>
 						<SiteInfoListItem>
 							<Link href={internalPages.showcase}>Vitrines tecnológicas</Link>
 						</SiteInfoListItem>
@@ -205,11 +205,17 @@ const Footer = ({ isAbout }) => (
 		</SiteInfo>
 		<SiteSocket>
 			<SiteSocketContainer>
-				<div>
-					<span>Orgulhosamente</span> desenvolvido pela equipe da
-					<span> Plataforma Sabiá</span> na{' '}
-					<span>UNIVERSIDADE FEDERAL RURAL DO SEMI-ÁRIDO - UFERSA</span>.
-				</div>
+				<LogosContainer>
+					<img
+						src="/logo-ufersa-color.png"
+						alt="Logo da Universidade Federal Rural do Semi-Árido"
+					/>
+					<img
+						src="/logo-mdir-color.jpg"
+						alt="Logo do Ministério do Desenvolvimento Regional"
+					/>
+				</LogosContainer>
+
 				<SiteSocketList>
 					<SiteSocketListItem>
 						<Link href={internalPages.privacyPolicy}>Política de Privacidade</Link>

packages/web/components/Footer/styles.js

@@ -181,7 +181,7 @@ export const SiteInfoListItem = styled.li`
 
 export const SiteSocket = styled.div`
 	color: ${({ theme }) => theme.colors.secondary};
-	background-color: ${({ theme }) => theme.colors.border};
+	background-color: ${({ theme }) => theme.colors.white};
 	width: 100%;
 	padding: 6rem 3rem;
 	font-size: 1.4rem;
@@ -193,31 +193,32 @@ export const SiteSocket = styled.div`
 `;
 
 export const SiteSocketContainer = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+	${({ theme: { screens } }) => css`
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
 
-	max-width: ${({ theme }) => theme.metrics.containerWidth}rem;
-	width: 100%;
-	margin: 0 auto;
+		max-width: ${`${screens.large}px`};
+		margin: 0 auto;
 
-	> div {
-		width: 50%;
-	}
+		> div {
+			width: 50%;
+		}
 
-	span {
-		font-weight: bold;
-	}
+		span {
+			font-weight: bold;
+		}
 
-	@media (max-width: ${({ theme }) => theme.screens.large}px) {
-		flex-direction: column;
+		@media (max-width: ${({ theme }) => theme.screens.large}px) {
+			flex-direction: column;
 
-		div {
-			text-align: center;
-			margin-bottom: 3rem;
-			width: 100%;
+			div {
+				text-align: center;
+				margin-bottom: 3rem;
+				width: 100%;
+			}
 		}
-	}
+	`}
 `;
 
 export const SiteSocketList = styled.ul`
@@ -249,3 +250,17 @@ export const SiteSocketListItem = styled.li`
 		margin: 2rem 0;
 	}
 `;
+
+export const LogosContainer = styled.div`
+	img {
+		display: block;
+	}
+
+	display: flex;
+	flex-direction: row;
+	gap: 16px;
+
+	@media (max-width: ${({ theme }) => theme.screens.medium}px) {
+		flex-direction: column;
+	}
+`;