finish

pages/aboutUs.tsx

@@ -24,13 +24,13 @@ export default function aboutUs() {
           aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
           contratação de energia.</p>
         <ul>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Informação</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Economia</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Gestão de Energia</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Imparcialidade</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Previsão de Custos</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Experiência</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
-          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Relacionamento</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
         </ul>
 
         <article>

pages/faq.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import CommonQuestionsCard from '../src/components/faqQuestionsCard/FaqQuestionsCard'
+import Header from '../src/components/header/Header'
+import { FaqView } from '../styles/layouts/commonQuestions/FaqView'
+
+export default function commonQuestions() {
+  return (
+    <FaqView>
+      <Header name='' />
+      <h1>Perguntas Frequentes</h1>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <section className='CommonQuestionsSection' >
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+        <CommonQuestionsCard />
+        <hr />
+      </section>
+    </FaqView>
+  )
+}

public/assets/less-icon.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.4917 16.1553H24.8894" stroke="#254F7F" stroke-width="1.2" stroke-linecap="round"/>
+</svg>

public/assets/plus-icon.svg

@@ -0,0 +1,4 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.49219 16.79H24.8899" stroke="black" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M16.6909 8.5918L16.6909 24.9895" stroke="black" stroke-width="1.2" stroke-linecap="round"/>
+</svg>

src/components/banner/BannerView.ts

@@ -2,6 +2,10 @@ import styled from 'styled-components'
 
 export const BannerView = styled.div`
   position: relative;
+
+  display: flex;
+  align-items: center;
+
   width: 100%;
   height: 19rem;
 
@@ -18,13 +22,28 @@ export const BannerView = styled.div`
 
   .text {
     position: relative;
-    margin:  90px 30px;
+    margin: 0 0 0 20px;
+
     font-family: 'Poppins';
     font-size:19px;
     font-style: normal;
     color: white;
     padding-top:45px;
     z-index: 2;
+
+    overflow: hidden;
+
+    p {
+      font-size: 30px;
+    }
+
+    * {
+      margin: 0;
+    }
+  }
+
+  @media (max-width: 1008px) {
+    font-size: 170%;
   }
 
 

src/components/buttons/basicButton/BasicButtonView.ts

@@ -14,7 +14,7 @@ export const BasicButtonView = styled.button`
   border-style: none;
 
   font-family: 'Poppins';
-  font-size: 16px;
+  font-size: 90%;
   /* identical to box height */
 
 

src/components/faqQuestionsCard/FaqQuestionsCard.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+import Image from 'next/image'
+
+import { FaqQuestionsCardBody, FaqQuestionsCardHeader, CommonQuestionsCardView } from './FaqQuestionsCardView'
+
+export default function CommonsQuestionsCard() {
+  const [ showCardBody, setShowCardBody ] = useState<boolean>(false)
+  return (
+    <CommonQuestionsCardView>
+      <FaqQuestionsCardHeader>
+        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</h4>
+        <Image src={showCardBody? '/assets/less-icon.svg' : '/assets/plus-icon.svg' } width={32} height={32} onClick={() => setShowCardBody(!showCardBody)} />
+      </FaqQuestionsCardHeader>
+
+      <FaqQuestionsCardBody showCardBody={showCardBody} >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Consequat porta faucibus elementum pharetra varius
+        </p>
+      </FaqQuestionsCardBody>
+    </CommonQuestionsCardView>
+  )
+}

src/components/faqQuestionsCard/FaqQuestionsCardView.ts

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const CommonQuestionsCardView = styled.article`
+`
+
+export const FaqQuestionsCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  flex-direction: row;
+
+  margin-top: 53px;
+
+  width: 100%;
+
+  img {
+    cursor: pointer;
+  }
+`
+interface CardBodyInterface {
+  showCardBody: boolean;
+}
+export const FaqQuestionsCardBody = styled.div<CardBodyInterface>`
+  display: ${props => props.showCardBody? 'flex' : 'none'};
+
+  margin-bottom: 20px;
+
+  p {
+    font-weight: 400;
+    font-size: 99%;
+
+    letter-spacing: 0.5px;
+
+    color: rgba(0, 0, 0, 0.6);
+
+    text-align: left;
+  }
+
+  @media (max-width: 1008px) {
+    p {
+      text-align: left;
+    }
+  }
+`

src/components/header/Header.tsx

@@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) {
         />
       </section>
       <section>
-        <Image src='/assets/png/copel.png' width={150} height={50} />
+        <Image src='/assets/png/copel.png' width={170} height={50} />
         <div className='icon' >
           olá, {'josé'}
         </div>

src/components/header/HeaderView.ts

@@ -14,7 +14,7 @@ export const HeaderView = styled.header`
 
     :last-child {
       display: flex;
-      justify-content: center;
+      justify-content: flex-end;
       align-items: flex-start;
 
       height: fit-content;

src/components/pageTitle/PageTitleView.ts

@@ -19,7 +19,7 @@ p {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 400;
-  font-size: 18px;
+  font-size: 99%;
   line-height: 27px;
 
   color: #969BA0;

src/components/sidebar/Sidebar.tsx

@@ -19,7 +19,7 @@ export default function Sidebar() {
   return (
     <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
       <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
-        <Image src='/assets/hamburgerModal.svg' width={25} height={25} />
+        <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
       </div>
       <div className='imageNext'>
         <Image src='/assets/logo.svg' width={100} height={100} />
@@ -28,7 +28,7 @@ export default function Sidebar() {
         <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
         <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
         <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
+        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia'}</li>
         <div className='economiaDrawer drawer' >
         <Link href='/grossSavings'><li>Economia Bruta</li></Link>
         <Link href='/accumulatedSavings'><li>Economia Acumulada</li></Link>
@@ -37,7 +37,7 @@ export default function Sidebar() {
         </div>
         <Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
         <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
-        <Link href='#'><li className={router.pathname=='/saq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'SAQ >'}</li></Link>
+        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
         <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
         <Link href='#'><li className={router.pathname=='/notification'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificação >'}</li></Link>
         <Link href='/telemetria'><li className={router.pathname=='/telemetry'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>

src/components/sidebar/SidebarView.ts

@@ -15,6 +15,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
   flex-direction: column;
 
   width: 20%;
+  min-width: 15rem;
 
   margin: 0;
   padding: 0;
@@ -27,16 +28,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     border-left: #254F7F solid 8px;
     background-color: #FAFBFF;
 
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 27px;
-
     color: #254F7F;
-
-    stop-color: #254F7F;
-    .svg {
-      background-color: red;
-    }
   }
 
   ul {
@@ -64,7 +56,6 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
 
       font-style: normal;
       font-weight: 500;
-      font-size: 16px;
       line-height: 27px;
 
       color: #969BA0;
@@ -131,7 +122,7 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
     display: none;
   }
 
-  @media (max-width: 1548px) {
+  @media (max-width: 1008px) {
     align-items: flex-start;
 
     width: 100%;
@@ -150,15 +141,22 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
       cursor: pointer;
 
       z-index: 2;
+
+      height: 5rem;
     }
     .imageNext {
       display: none;
     }
     ul {
       display: ${props => props.modalOpen? 'block' : 'none'};
-      min-height: 100vh;
+      min-height: 85vh;
 
       background-color: #FFF;
+
+      li {
+        height: 7rem;
+        font-size: 170%;
+      }
     }
     aside {
       display: none;

styles/app/AppView.ts

@@ -6,7 +6,7 @@ export const AppView = styled.main`
   margin: 0 0 10rem 0;
   padding: 0;
 
-  @media (max-width: 1548px) {
+  @media (max-width: 1008px) {
     flex-direction: column;
     margin: 0;
   }

styles/layouts/aboutUs/AboutUsView.ts

@@ -7,7 +7,7 @@ export const AboutUsView = styled.main`
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 300;
-    font-size: 17px;
+    font-size: 80%;
     line-height: 26px;
   }
 
@@ -17,6 +17,8 @@ export const AboutUsView = styled.main`
     li {
       display: flex;
       margin-bottom: 8px;
+
+      font-size: 98.98%;
     }
   }
 
@@ -37,4 +39,14 @@ export const AboutUsView = styled.main`
       }
     }
   }
+
+  @media (max-width: 1008px) {
+    li {
+      font-size: 170%!important;
+    }
+
+    img {
+      width: 200px;
+    }
+  }
 `

styles/layouts/commonQuestions/FaqView.ts

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export const FaqView = styled.main`
+  display: flex;
+  align-items: center;
+
+  flex-direction: column;
+
+  width: 100%;
+
+  h1 {
+    font-weight: 700;
+    font-size: calc(90% + 2rem);
+    line-height: 72px;
+    text-align: center;
+    letter-spacing: 0.5px;
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 99.98%;
+    line-height: 21px;
+    text-align: center;
+    letter-spacing: 0.5px;
+
+    color: #AAAAAA;
+  }
+
+  .CommonQuestionsSection {
+    width: 80%;
+  }
+
+  hr {
+    border: 1px solid #DDDDDD;
+  }
+`