Add IFMG Sectors info

src/components/SectorCard/index.js

@@ -0,0 +1,40 @@
+import {
+  Card,
+  CardMedia,
+  CardContent,
+  Typography,
+  CardActions,
+  Button,
+} from '@mui/material';
+
+import styles from './styles';
+
+function SectorCard({
+  title,
+  description,
+  coverImage,
+  informationUrl,
+  layoutType,
+}) {
+  const { card, cardMedia } = styles;
+  return (
+    <Card sx={card}>
+      <CardMedia {...cardMedia} image={coverImage.image} alt={coverImage.alt} />
+      <CardContent sx={layoutType === 'desktop' ? { height: 190 } : null}>
+        <Typography gutterBottom variant="h5" component="div">
+          {title}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {description}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button href={informationUrl} target="__blank" size="small">
+          Informações
+        </Button>
+      </CardActions>
+    </Card>
+  );
+}
+
+export default SectorCard;

src/components/SectorCard/styles.js

@@ -0,0 +1,13 @@
+const card = {
+  maxWidth: 510,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+};
+
+const cardMedia = {
+  component: 'img',
+  height: '140',
+};
+const styles = { card, cardMedia };
+export default styles;

src/screens/Information/View.js

@@ -7,11 +7,12 @@ import {
   Stack,
   Skeleton,
 } from '@mui/material';
+import SectorCard from '../../components/SectorCard';
 import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 
 import styles from './styles';
 
-function View({ faq, layoutType }) {
+function View({ faq, sectors, layoutType }) {
   const {
     stackContainer,
     skeletonTitle,
@@ -20,6 +21,8 @@ function View({ faq, layoutType }) {
     accordionSkeletonStack,
     title,
     accordionSummary,
+    sectorsTitle,
+    sectorsStack,
   } = styles[layoutType];
 
   if (layoutType === 'desktop') {
@@ -59,6 +62,18 @@ function View({ faq, layoutType }) {
         ) : (
           <h1>Nenhuma pergunta encontrada</h1>
         )}
+        <h1 style={sectorsTitle}>Setores do IFMG Campus Sabará</h1>
+        <Stack {...sectorsStack}>
+          {sectors.map(sector => (
+            <SectorCard
+              key={sector.title}
+              title={sector.title}
+              description={sector.description}
+              coverImage={sector.coverImage}
+              informationUrl={sector.informationUrl}
+            />
+          ))}
+        </Stack>
       </Stack>
     );
   } else if (layoutType === 'mobile') {
@@ -98,6 +113,18 @@ function View({ faq, layoutType }) {
         ) : (
           <h1>Nenhuma pergunta encontrada</h1>
         )}
+        <h1 style={sectorsTitle}>Setores do IFMG Campus Sabará</h1>
+        <Stack {...sectorsStack}>
+          {sectors.map(sector => (
+            <SectorCard
+              key={sector.title}
+              title={sector.title}
+              description={sector.description}
+              coverImage={sector.coverImage}
+              informationUrl={sector.informationUrl}
+            />
+          ))}
+        </Stack>
       </Stack>
     );
   }

src/screens/Information/index.js

@@ -18,7 +18,76 @@ function Information() {
     getClassrooms();
   }, [fetchFAQ]);
 
-  return <View faq={faq} layoutType={layoutType} />;
+  const sectors = [
+    {
+      title: 'Controle e Registro Acadêmico (CRA)',
+      description:
+        'Realiza atividades como a expedição de históricos escolares, declarações de matrícula, diplomas, desligamento de curso, dispensas de disciplinas e outros requerimentos diversos.',
+      informationUrl:
+        'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/controle-e-registro-academico',
+      coverImage: {
+        image: 'https://pixabay.com/images/download/archive-1850170_640.jpg',
+        alt: 'Fotografia de uma sala cheia de arquivos',
+      },
+    },
+    {
+      title: 'Núcleo de Apoio Educacional (NAE)',
+      description:
+        'O Núcleo de Apoio Educacional – NAE é o setor que oferece suporte e assessoria às atividades de ensino, pesquisa e extensão. Atua no acompanhamento e assistência direta aos discentes e docentes, no atendimento à comunidade externa e na colaboração com o trabalho dos gestores.',
+      informationUrl:
+        'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/nae',
+      coverImage: {
+        image: 'https://pixabay.com/images/download/people-2557399_640.jpg',
+        alt: 'Fotografia de pessoas estudando juntas',
+      },
+    },
+    {
+      title: 'Estágios',
+      description:
+        'Atua na orientação do discente sobre todo o processo de documentação e acompanhamento do estágio.',
+      informationUrl:
+        'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+      coverImage: {
+        image:
+          'https://thumbs.dreamstime.com/b/est%C3%A1gio-e-lista-de-profissionais-escritos-na-nota-122225688.jpg',
+        alt: 'Fotografia de pessoas estudando juntas',
+      },
+    },
+    {
+      title: 'Pesquisa',
+      description:
+        'A Coordenação de Pesquisa, Inovação e Pós-graduação do IFMG Campus Sabará, busca fomentar o desenvolvimento da pesquisa e inovação por meio de estímulos para criação de projetos que envolvam a comunidade acadêmica.',
+      informationUrl:
+        'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+      coverImage: {
+        image: 'https://pixabay.com/images/download/microscope-275984_640.jpg',
+        alt: 'Fotografia de um microscópio',
+      },
+    },
+    {
+      title: 'Extensão e Relações Institucionais',
+      description:
+        'O desenvolvimento da extensão permite a comunidade acadêmica ter um canal de comunicação e de mútuo aprendizado no binômio escola - comunidade.',
+      informationUrl:
+        'https://www.ifmg.edu.br/sabara/ensino-pesquisa-e-extensao/estagios-1',
+      coverImage: {
+        image: 'https://pixabay.com/images/download/team-386673_640.jpg',
+        alt: 'Fotografia de pessoas estendendo uma mão em uma roda',
+      },
+    },
+    {
+      title: 'Biblioteca',
+      description:
+        'A biblioteca do IFMG Campus Sabará tem como finalidade proporcionar ao seu corpo docente e discente, técnicos administrativos, pesquisadores e à comunidade geral o acesso a materiais e informações bibliográficas. Assim, a biblioteca disponibiliza aos seus usuários os serviços de empréstimos, reservas, renovação, auxílio aos alunos, levantamentos bibliográficos e consulta local ao acervo.',
+      informationUrl: 'https://www.ifmg.edu.br/sabara/biblioteca/apresentacao',
+      coverImage: {
+        image: 'https://pixabay.com/images/download/books-1281581_640.jpg',
+        alt: 'Fotografia de uma biblioteca',
+      },
+    },
+  ];
+
+  return <View faq={faq} sectors={sectors} layoutType={layoutType} />;
 }
 
 export default Information;

src/screens/Information/styles.js

@@ -37,6 +37,19 @@ const desktopAccordionSummary = {
   backgroundColor: '#f7f7f7',
 };
 
+const desktopSectorsTitle = {
+  marginTop: '100px',
+  textAlign: 'center',
+};
+
+const desktopSectorsStack = {
+  sx: { padding: '40px', paddingBottom: '100px' },
+  justifyContent: 'center',
+  flexWrap: 'wrap',
+  flexDirection: 'row',
+  gap: '20px',
+};
+
 const desktop = {
   stackContainer: desktopStackContainer,
   skeletonTitle: desktopSkeletonTitle,
@@ -45,6 +58,8 @@ const desktop = {
   accordionSkeletonStack: desktopAccordionSkeletonStack,
   title: desktopTitle,
   accordionSummary: desktopAccordionSummary,
+  sectorsTitle: desktopSectorsTitle,
+  sectorsStack: desktopSectorsStack,
 };
 
 // ========== Mobile ==========
@@ -87,6 +102,17 @@ const mobileAccordionSummary = {
   backgroundColor: '#f7f7f7',
 };
 
+const mobileSectorsTitle = {
+  marginTop: '80px',
+  textAlign: 'center',
+  marginBottom: '30px',
+};
+
+const mobileSectorsStack = {
+  sx: { padding: '20px', paddingBottom: '100px' },
+  gap: '20px',
+};
+
 const mobile = {
   stackContainer: mobileStackContainer,
   skeletonTitle: mobileSkeletonTitle,
@@ -95,6 +121,8 @@ const mobile = {
   accordionSkeletonStack: mobileAccordionSkeletonStack,
   title: mobileTitle,
   accordionSummary: mobileAccordionSummary,
+  sectorsTitle: mobileSectorsTitle,
+  sectorsStack: mobileSectorsStack,
 };
 
 // ========== Unset ==========
@@ -106,6 +134,8 @@ const unset = {
   accordionSkeletonStack: null,
   title: null,
   accordionSummary: null,
+  sectorsTitle: null,
+  sectorsStack: null,
 };
 
 const styles = { desktop, mobile, unset };