From 6fcc8dd73067c9731e76b1384ebc482380603031 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 11 Jan 2023 19:54:14 -0300 Subject: [PATCH] feat(footer): Cria o footer top --- .../FooterMenu/FooterMenu.module.scss | 48 +++++++++++ src/components/FooterMenu/FooterMenu.tsx | 83 +++++++++++++++++++ .../FooterTop/FooterTop.module.scss | 8 ++ src/components/FooterTop/FooterTop.tsx | 18 ++++ .../RedesSociais/RedesSociais.module.scss | 34 ++++++++ src/components/RedesSociais/RedesSociais.tsx | 64 ++++++++++++++ .../RedesSociais/assets/facebook-icon.svg | 11 +++ .../RedesSociais/assets/instagram-icon.svg | 13 +++ .../RedesSociais/assets/linkedin-icon.svg | 13 +++ .../RedesSociais/assets/twitter-icon.svg | 4 + .../RedesSociais/assets/youtube-icon.svg | 4 + src/pages/Home.tsx | 34 ++++---- 12 files changed, 318 insertions(+), 16 deletions(-) create mode 100644 src/components/FooterMenu/FooterMenu.module.scss create mode 100644 src/components/FooterMenu/FooterMenu.tsx create mode 100644 src/components/FooterTop/FooterTop.module.scss create mode 100644 src/components/FooterTop/FooterTop.tsx create mode 100644 src/components/RedesSociais/RedesSociais.module.scss create mode 100644 src/components/RedesSociais/RedesSociais.tsx create mode 100644 src/components/RedesSociais/assets/facebook-icon.svg create mode 100644 src/components/RedesSociais/assets/instagram-icon.svg create mode 100644 src/components/RedesSociais/assets/linkedin-icon.svg create mode 100644 src/components/RedesSociais/assets/twitter-icon.svg create mode 100644 src/components/RedesSociais/assets/youtube-icon.svg diff --git a/src/components/FooterMenu/FooterMenu.module.scss b/src/components/FooterMenu/FooterMenu.module.scss new file mode 100644 index 0000000..25a979c --- /dev/null +++ b/src/components/FooterMenu/FooterMenu.module.scss @@ -0,0 +1,48 @@ +@use '../../variables'; + +.footer-menu { + display: flex; + gap: 121px; + + @media (min-width: 2500px) { + gap: 293px; + } + + &__items { + + &__title, + &__item, + &__item-title { + color: variables.$black-300; + margin-bottom: 12px; + } + + &__title { + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } + + &__item, + &__item-title { + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + } + + &__item-title { + font-weight: 500; + } + } +} \ No newline at end of file diff --git a/src/components/FooterMenu/FooterMenu.tsx b/src/components/FooterMenu/FooterMenu.tsx new file mode 100644 index 0000000..793600b --- /dev/null +++ b/src/components/FooterMenu/FooterMenu.tsx @@ -0,0 +1,83 @@ +import React from "react"; + +import styles from "./FooterMenu.module.scss"; + +import { ItemList } from "../ItemList/ItemList"; + +const FooterMenu = () => { + + return ( +
+ +
+

+ INSTITUCIONAL +

+ + +
+ +
+

+ DÚVIDAS +

+ + +
+ +
+

+ FALE CONOSCO +

+ + +
+
+ ); +} + +export { FooterMenu }; diff --git a/src/components/FooterTop/FooterTop.module.scss b/src/components/FooterTop/FooterTop.module.scss new file mode 100644 index 0000000..4cc5cf6 --- /dev/null +++ b/src/components/FooterTop/FooterTop.module.scss @@ -0,0 +1,8 @@ +@use '../../variables'; + +.footer-top { + display: flex; + justify-content: space-between; + margin: 50px 0; + padding: 0 100px; +} diff --git a/src/components/FooterTop/FooterTop.tsx b/src/components/FooterTop/FooterTop.tsx new file mode 100644 index 0000000..9dec508 --- /dev/null +++ b/src/components/FooterTop/FooterTop.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import styles from "./FooterTop.module.scss"; + +import { RedesSociais } from "../RedesSociais/RedesSociais"; +import { FooterMenu } from "../FooterMenu/FooterMenu"; + +const FooterTop = () => { + + return ( +
+ + +
+ ); +} + +export { FooterTop }; diff --git a/src/components/RedesSociais/RedesSociais.module.scss b/src/components/RedesSociais/RedesSociais.module.scss new file mode 100644 index 0000000..6fbce6b --- /dev/null +++ b/src/components/RedesSociais/RedesSociais.module.scss @@ -0,0 +1,34 @@ +@use '../../variables'; + +.redes-sociais { + &__container { + display: flex; + flex-direction: column; + justify-content: flex-start; + gap: 12px; + } + + &__icons { + display: flex; + gap: 10px; + + &__icon { + width: 35px; + + @media (min-width: 2500px) { + width: 70px; + } + } + } + + &__link { + font-size: 14px; + line-height: 16px; + color: variables.$black-300; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + } +} diff --git a/src/components/RedesSociais/RedesSociais.tsx b/src/components/RedesSociais/RedesSociais.tsx new file mode 100644 index 0000000..1a31278 --- /dev/null +++ b/src/components/RedesSociais/RedesSociais.tsx @@ -0,0 +1,64 @@ +import React from "react"; + +import styles from "./RedesSociais.module.scss"; + +import imgFacebook from "./assets/facebook-icon.svg"; +import imgInstagram from "./assets/instagram-icon.svg"; +import imgTwitter from "./assets/twitter-icon.svg"; +import imgYouTube from "./assets/youtube-icon.svg"; +import imgLinkdin from "./assets/linkedin-icon.svg"; + +import { IconList } from "../IconList/IconList"; + +const RedesSociais = () => { + + return ( +
+ + + www.loremipsum.com +
+ ); +} + +export { RedesSociais }; diff --git a/src/components/RedesSociais/assets/facebook-icon.svg b/src/components/RedesSociais/assets/facebook-icon.svg new file mode 100644 index 0000000..17d16fd --- /dev/null +++ b/src/components/RedesSociais/assets/facebook-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/instagram-icon.svg b/src/components/RedesSociais/assets/instagram-icon.svg new file mode 100644 index 0000000..8a8998b --- /dev/null +++ b/src/components/RedesSociais/assets/instagram-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/linkedin-icon.svg b/src/components/RedesSociais/assets/linkedin-icon.svg new file mode 100644 index 0000000..0e74f6b --- /dev/null +++ b/src/components/RedesSociais/assets/linkedin-icon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/RedesSociais/assets/twitter-icon.svg b/src/components/RedesSociais/assets/twitter-icon.svg new file mode 100644 index 0000000..429d79f --- /dev/null +++ b/src/components/RedesSociais/assets/twitter-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/RedesSociais/assets/youtube-icon.svg b/src/components/RedesSociais/assets/youtube-icon.svg new file mode 100644 index 0000000..8894c8b --- /dev/null +++ b/src/components/RedesSociais/assets/youtube-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index c492db5..d8c8f6b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,29 +1,31 @@ -import React from 'react'; +import React from "react"; import styles from "./Home.module.scss"; -import { HeaderTop } from '../components/HeaderTop/HeaderTop'; -import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom'; -import { Newsletter } from '../components/Newsletter/Newsletter'; -import { FooterBottom } from '../components/FooterBottom/FooterBottom'; -import { WhatsAppAndScrollTop } from '../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop'; +import { HeaderTop } from "../components/HeaderTop/HeaderTop"; +import { HeaderBottom } from "../components/HeaderBottom/HeaderBottom"; +import { Newsletter } from "../components/Newsletter/Newsletter"; +import { FooterBottom } from "../components/FooterBottom/FooterBottom"; +import { FooterTop } from "../components/FooterTop/FooterTop"; +import { WhatsAppAndScrollTop } from "../components/WhatsAppAndScrollTop/WhatsAppAndScrollTop"; const Home = () => { return ( <> -
- - -
+
+ + +
-
+
- + ); }