diff --git a/src/assets/images/facebook.png b/src/assets/images/facebook.png new file mode 100644 index 0000000..6169d7f Binary files /dev/null and b/src/assets/images/facebook.png differ diff --git a/src/assets/images/instagram.png b/src/assets/images/instagram.png new file mode 100644 index 0000000..c599a3f Binary files /dev/null and b/src/assets/images/instagram.png differ diff --git a/src/assets/images/linkedIn.png b/src/assets/images/linkedIn.png new file mode 100644 index 0000000..1f69e56 Binary files /dev/null and b/src/assets/images/linkedIn.png differ diff --git a/src/assets/images/twitter.png b/src/assets/images/twitter.png new file mode 100644 index 0000000..4b0f20b Binary files /dev/null and b/src/assets/images/twitter.png differ diff --git a/src/assets/images/youTube.png b/src/assets/images/youTube.png new file mode 100644 index 0000000..8341630 Binary files /dev/null and b/src/assets/images/youTube.png differ diff --git a/src/components/FooterBottom/styles.module.scss b/src/components/FooterBottom/styles.module.scss index 997272c..81c6d75 100644 --- a/src/components/FooterBottom/styles.module.scss +++ b/src/components/FooterBottom/styles.module.scss @@ -118,7 +118,7 @@ } } - @media (min-width: 1025px) and (max-width: 1128px) { + @media (min-width: 1025px) and (max-width: 1145px) { .poweredBy, .developedBy { font-size: 8px; diff --git a/src/components/FooterTop/index.tsx b/src/components/FooterTop/index.tsx index 7e797a2..6df76c7 100644 --- a/src/components/FooterTop/index.tsx +++ b/src/components/FooterTop/index.tsx @@ -1,8 +1,98 @@ import React from "react"; import styles from "./styles.module.scss"; +import facebook from "../../assets/images/facebook.png"; +import instagram from "../../assets/images/instagram.png"; +import twitter from "../../assets/images/twitter.png"; +import youTube from "../../assets/images/youTube.png"; +import linkedIn from "../../assets/images/linkedIn.png"; const FooterTop = () => { - return
; + return ( +
+
+
+
+
+

Institucional

+ +
+ +
+
+
+

Dúvidas

+ +
+ +
+
+
+

Fale Conosco

+ +
+
    +

    Atendimento Ao Consumidor

    +
  • +

    (11) 4159 9504

    +
  • +

    Atendimento Online

    +
  • +

    (11) 99433-8825

    +
  • +
+
+
+
+
+ + + + + + + + + + + + + + + +
+
+ www.loremipsum.com +
+
+
+
+ ); }; export { FooterTop }; diff --git a/src/components/FooterTop/styles.module.scss b/src/components/FooterTop/styles.module.scss index 804c9d2..00f3767 100644 --- a/src/components/FooterTop/styles.module.scss +++ b/src/components/FooterTop/styles.module.scss @@ -1,6 +1,80 @@ .footerTop { + display: flex; + justify-content: center; border-width: 0px 0px 1px 1px; border-style: solid; border-color: var(--black-500); height: 239px; + padding: 50px 0; + + &__content { + display: flex; + justify-content: space-between; + width: 84.442%; + } + + &__menuList { + display: flex; + justify-content: space-between; + width: 707px; + height: 100%; + + .menuLists-title { + height: 14px; + margin-bottom: 12px; + } + + h1 { + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: var(--black-400); + } + + h2 { + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: var(--black-400); + margin-bottom: 12px; + } + + li { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + color: var(--black-400); + margin-bottom: 12px; + } + } + + &__socialMedia { + width: 215px; + height: 63px; + + .socialMedia-icons { + display: flex; + justify-content: space-between; + margin-bottom: 8px; + + img { + width: 35px; + height: 35px; + } + } + + .socialMeida-site { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--black-400); + } + } } diff --git a/src/styles/global.scss b/src/styles/global.scss index ccfa869..5215c3d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -18,6 +18,7 @@ a { all: unset; + cursor: pointer; } ul {