Merge branch 'feature/aboutUs' into 'dev'

✨ add about us page feature

See merge request kluppsoftware/smart-energia-web!21

pages/aboutUs.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image'
+import React from 'react'
+import Banner from '../src/components/banner/Banner'
+import Header from '../src/components/header/Header'
+import { AboutUsView } from '../styles/layouts/aboutUs/AboutUsView'
+
+export default function aboutUs() {
+  return (
+    <AboutUsView>
+      <Header name='' />
+      <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
+
+      <section>
+        <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
+          Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
+
+        <p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
+          Vendedores de energia. </p>
+
+        <p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
+          energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
+
+        <p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
+          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} />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} />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} />Experiência</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />Relacionamento</li>
+        </ul>
+
+        <article>
+          <aside>
+            <h2>Apoio a projetos sociais</h2>
+            <div>
+              <Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
+              <Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
+            </div>
+          </aside>
+        </article>
+      </section>
+    </AboutUsView>
+  )
+}

public/assets/listIcon.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.0497C0 7.21311 7.16344 0.00195312 16 0.00195312C24.8366 0.00195312 32 7.21311 32 16.0497C32 24.8862 24.8366 32.0974 16 32.0974C7.16344 32.0974 0 24.8862 0 16.0497Z" fill="#F2F4F7"/>
+<g clip-path="url(#clip0_125_1603)">
+<path d="M16.6667 9.33496L10 17.335H16L15.3333 22.6683L22 14.6683H16L16.6667 9.33496Z" stroke="#475467" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_125_1603">
+<rect width="16" height="16" fill="white" transform="translate(8 8.00195)"/>
+</clipPath>
+</defs>
+</svg>

src/components/sidebar/Sidebar.tsx

@@ -38,7 +38,7 @@ export default function Sidebar() {
         <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='#'><li className={router.pathname=='/aboutus'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</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>
       </ul>

styles/layouts/aboutUs/AboutUsView.ts

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const AboutUsView = styled.main`
+  width: 100%;
+
+  p {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 17px;
+    line-height: 26px;
+  }
+
+  ul {
+    list-style: none;
+
+    li {
+      display: flex;
+      margin-bottom: 8px;
+    }
+  }
+
+  section {
+    article {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      aside {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: fit-content;
+
+        flex-direction: column;
+      }
+    }
+  }
+`