From 6054e6180e96dfb9119fc94853d75fff91bef0e8 Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Thu, 12 May 2022 09:43:28 -0300 Subject: [PATCH] finish --- pages/aboutUs.tsx | 14 +++--- pages/faq.tsx | 26 +++++++++++ public/assets/less-icon.svg | 3 ++ public/assets/plus-icon.svg | 4 ++ src/components/banner/BannerView.ts | 21 ++++++++- .../buttons/basicButton/BasicButtonView.ts | 2 +- .../faqQuestionsCard/FaqQuestionsCard.tsx | 23 ++++++++++ .../faqQuestionsCard/FaqQuestionsCardView.ts | 45 +++++++++++++++++++ src/components/header/Header.tsx | 2 +- src/components/header/HeaderView.ts | 2 +- src/components/pageTitle/PageTitleView.ts | 2 +- src/components/sidebar/Sidebar.tsx | 6 +-- src/components/sidebar/SidebarView.ts | 22 +++++---- src/txt.txt | 0 styles/app/AppView.ts | 2 +- styles/layouts/aboutUs/AboutUsView.ts | 14 +++++- styles/layouts/commonQuestions/FaqView.ts | 36 +++++++++++++++ 17 files changed, 195 insertions(+), 29 deletions(-) create mode 100644 pages/faq.tsx create mode 100644 public/assets/less-icon.svg create mode 100644 public/assets/plus-icon.svg create mode 100644 src/components/faqQuestionsCard/FaqQuestionsCard.tsx create mode 100644 src/components/faqQuestionsCard/FaqQuestionsCardView.ts create mode 100644 src/txt.txt create mode 100644 styles/layouts/commonQuestions/FaqView.ts diff --git a/pages/aboutUs.tsx b/pages/aboutUs.tsx index d59ebc2..cef1d84 100644 --- a/pages/aboutUs.tsx +++ b/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.

diff --git a/pages/faq.tsx b/pages/faq.tsx new file mode 100644 index 0000000..164eae9 --- /dev/null +++ b/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 ( + +
+

Perguntas Frequentes

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+ +
+ +
+ +
+ +
+
+ + ) +} diff --git a/public/assets/less-icon.svg b/public/assets/less-icon.svg new file mode 100644 index 0000000..1e98ed9 --- /dev/null +++ b/public/assets/less-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/plus-icon.svg b/public/assets/plus-icon.svg new file mode 100644 index 0000000..03a43ea --- /dev/null +++ b/public/assets/plus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/banner/BannerView.ts b/src/components/banner/BannerView.ts index 1d29a5b..d694a9a 100644 --- a/src/components/banner/BannerView.ts +++ b/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%; } diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts index f7a5275..dba8475 100644 --- a/src/components/buttons/basicButton/BasicButtonView.ts +++ b/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 */ diff --git a/src/components/faqQuestionsCard/FaqQuestionsCard.tsx b/src/components/faqQuestionsCard/FaqQuestionsCard.tsx new file mode 100644 index 0000000..343e749 --- /dev/null +++ b/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(false) + return ( + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

+ setShowCardBody(!showCardBody)} /> + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Consequat porta faucibus elementum pharetra varius +

+ + + ) +} diff --git a/src/components/faqQuestionsCard/FaqQuestionsCardView.ts b/src/components/faqQuestionsCard/FaqQuestionsCardView.ts new file mode 100644 index 0000000..91d16dd --- /dev/null +++ b/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` + 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; + } + } +` diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 34c865b..4bc5ffb 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -53,7 +53,7 @@ export default function Header({ name }: headerInterface) { />
- +
olá, {'josé'}
diff --git a/src/components/header/HeaderView.ts b/src/components/header/HeaderView.ts index 8b87195..d217c5e 100644 --- a/src/components/header/HeaderView.ts +++ b/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; diff --git a/src/components/pageTitle/PageTitleView.ts b/src/components/pageTitle/PageTitleView.ts index e903e9e..3013202 100644 --- a/src/components/pageTitle/PageTitleView.ts +++ b/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; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 78cc0ca..282ce6f 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -19,7 +19,7 @@ export default function Sidebar() { return (
setViewModal(!viewModal)} > - +
@@ -28,7 +28,7 @@ export default function Sidebar() {
  • {'Visão Geral'}
  • {'Consumo'}
  • {'Resumo de Op. '}
    • -
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia >'}
    • +
  • setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } >{'Economia'}
  • Economia Bruta
  • Economia Acumulada
    • @@ -37,7 +37,7 @@ export default function Sidebar() {
  • {'Notícias >'}
  • {'Info Setorial >'}
    • -
  • {'SAQ >'}
    • +
  • {'FAQ >'}
  • {'Sobre Nós >'}
  • {'Notificação >'}
  • {'Telemetria >'}
    • diff --git a/src/components/sidebar/SidebarView.ts b/src/components/sidebar/SidebarView.ts index 7440f24..d2d2df8 100644 --- a/src/components/sidebar/SidebarView.ts +++ b/src/components/sidebar/SidebarView.ts @@ -15,6 +15,7 @@ export const SidebarView = styled.nav` flex-direction: column; width: 20%; + min-width: 15rem; margin: 0; padding: 0; @@ -27,16 +28,7 @@ export const SidebarView = styled.nav` 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` font-style: normal; font-weight: 500; - font-size: 16px; line-height: 27px; color: #969BA0; @@ -131,7 +122,7 @@ export const SidebarView = styled.nav` 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` 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; diff --git a/src/txt.txt b/src/txt.txt new file mode 100644 index 0000000..e69de29 diff --git a/styles/app/AppView.ts b/styles/app/AppView.ts index fcfaa67..f52d117 100644 --- a/styles/app/AppView.ts +++ b/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; } diff --git a/styles/layouts/aboutUs/AboutUsView.ts b/styles/layouts/aboutUs/AboutUsView.ts index 3feabdd..d53880e 100644 --- a/styles/layouts/aboutUs/AboutUsView.ts +++ b/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; + } + } ` diff --git a/styles/layouts/commonQuestions/FaqView.ts b/styles/layouts/commonQuestions/FaqView.ts new file mode 100644 index 0000000..32d9b16 --- /dev/null +++ b/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; + } +`