diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx
index b2cfb3f..6ecd501 100644
--- a/react-ts/src/Pages/Home/Home.tsx
+++ b/react-ts/src/Pages/Home/Home.tsx
@@ -3,6 +3,7 @@ import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
import BreadCrumb from '../../components/BreadCrumb/BreadCrumb'
import NewsLetter from '../../components/NewsLetter/NewsLetter'
import FooterLinks from '../../components/FooterLinks/FooterLinks'
+import FooterLinksMobile from '../../components/FooterLinksMobile/FooterLinksMobile'
import Footer from '../../components/Footer/Footer'
const Home = () => {
@@ -13,6 +14,7 @@ const Home = () => {
+
>
)
diff --git a/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
index 678ec45..ce193bb 100644
--- a/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
+++ b/react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
@@ -17,6 +17,12 @@
}
}
+@media only screen and (max-width: 1280px) {
+ .container-breadCrumb {
+ padding: 29px 16px 0;
+ }
+}
+
@media only screen and (min-width: 2500px) {
.container-breadCrumb {
&__house {
diff --git a/react-ts/src/components/Footer/Footer.tsx b/react-ts/src/components/Footer/Footer.tsx
index 755642f..544ba7a 100644
--- a/react-ts/src/components/Footer/Footer.tsx
+++ b/react-ts/src/components/Footer/Footer.tsx
@@ -1,7 +1,7 @@
import styles from './Footer.module.scss';
import ScrollTop from '../ScrollTop/ScrollTop';
-import Whatsap from '../Whatsap/WhatsApp';
+import Whatsap from '../Whatsapp/WhatsApp';
import FooterCardsMobile from './FooterCardsMobile';
import MasterCard from '../../assets/images/MasterCard.svg';
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.module.scss b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
index 0edcc4d..31dc2fb 100644
--- a/react-ts/src/components/FooterLinks/FooterLinks.module.scss
+++ b/react-ts/src/components/FooterLinks/FooterLinks.module.scss
@@ -44,23 +44,6 @@
}
}
}
- &__social {
- display: flex;
- flex-direction: column;
- row-gap: 12px;
- &__picture {
- display: flex;
- column-gap: 10px;
- }
- a {
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 16px;
- color: $color-black2;
- }
- }
&__contact {
position: absolute;
right: 0;
@@ -68,6 +51,12 @@
}
}
+@media only screen and (max-width: 1024px) {
+ .container {
+ display: none;
+ }
+}
+
@media only screen and (min-width: 2500px) {
.container {
&__wrapper-links {
@@ -91,17 +80,5 @@
}
}
}
- &__social {
- &__picture {
- img {
- width: 70px;
- height: 70px;
- }
- }
- a {
- font-size: 28px;
- line-height: 33px;
- }
- }
}
}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinks/FooterLinks.tsx b/react-ts/src/components/FooterLinks/FooterLinks.tsx
index 7ed0a40..b6247ab 100644
--- a/react-ts/src/components/FooterLinks/FooterLinks.tsx
+++ b/react-ts/src/components/FooterLinks/FooterLinks.tsx
@@ -1,13 +1,8 @@
import styles from './FooterLinks.module.scss';
+import SocialMedia from '../SocialMedia/SocialMedia';
import ScrollTop from '../ScrollTop/ScrollTop';
-import Whatsap from '../Whatsap/WhatsApp';
-
-import Facebook from '../../assets/images/Facebook.svg';
-import Instagram from '../../assets/images/Instagram.svg';
-import Twitter from '../../assets/images/Twitter.svg';
-import YouTube from '../../assets/images/YouTube.svg';
-import Linkedin from '../../assets/images/Linkedin.svg';
+import Whatsap from '../Whatsapp/WhatsApp';
const FooterLinks = () => {
return (
@@ -71,18 +66,7 @@ const FooterLinks = () => {
-
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss
new file mode 100644
index 0000000..6040ffc
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss
@@ -0,0 +1,28 @@
+@import '../../styles/utils/Variables.scss';
+
+.container {
+ &__title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ h1 {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-black2;
+ }
+ span {
+ font-family: $font-family;
+ font-weight: 500;
+ color: $color-black2;
+ }
+ }
+}
+
+@media only screen and (min-width: 1025px) {
+ .container {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
new file mode 100644
index 0000000..77bb8e9
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+import styles from './FooterLinksAccordion.module.scss';
+
+interface Title {
+ title: any,
+ content: any,
+}
+
+const FooterLinksAccordion = ({ title, content }: Title) => {
+ const [isActive, setIsActive] = useState(false);
+
+ return (
+
+
setIsActive(!isActive)}>
+
{title}
+ {isActive ? - : +}
+
+ {isActive && <>{content}>}
+
+ );
+};
+
+export default FooterLinksAccordion;
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss
new file mode 100644
index 0000000..130928d
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss
@@ -0,0 +1,34 @@
+@import '../../styles/utils/Variables.scss';
+
+.container {
+ padding: 24px 16px;
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ border-top: 1px solid $color-black1;
+ ul {
+ display: flex;
+ flex-direction: column;
+ row-gap: 5px;
+ b {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ color: $color-black2;
+ }
+ li {
+ a {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 14px;
+ text-transform: capitalize;
+ color: $color-black2;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx
new file mode 100644
index 0000000..b7c11d3
--- /dev/null
+++ b/react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx
@@ -0,0 +1,71 @@
+import styles from './FooterLinksMobile.module.scss';
+
+import FooterLinksAccordion from './FooterLinksAccordion';
+import SocialMedia from '../SocialMedia/SocialMedia';
+
+
+const FooterLinksMobile = () => {
+
+ const text = [
+ {
+ title: 'Institucional',
+ subTitle:
+ },
+ {
+ title: 'Dúvidas',
+ subTitle:
+ },
+ {
+ title: 'Fale Conosco',
+ subTitle:
+ },
+ ]
+
+ return (
+ <>
+
+ {text.map(({title, subTitle}) => (
+
+ ))}
+
+ >
+ )
+}
+
+
+export default FooterLinksMobile;
\ No newline at end of file
diff --git a/react-ts/src/components/MenuMobile/ComponentMobile.tsx b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
index c63f7b6..b18802a 100644
--- a/react-ts/src/components/MenuMobile/ComponentMobile.tsx
+++ b/react-ts/src/components/MenuMobile/ComponentMobile.tsx
@@ -1,11 +1,9 @@
-import { useState } from 'react';
import styles from './Component.module.scss';
import UserAccount from '../UserAccount/UseAccount';
import CloseMobile from '../../assets/images/CloseMobile.svg';
-
const MenuComponent = () => {
return (
diff --git a/react-ts/src/components/MenuMobile/MenuMobile.tsx b/react-ts/src/components/MenuMobile/MenuMobile.tsx
index 41ef38d..cd2f281 100644
--- a/react-ts/src/components/MenuMobile/MenuMobile.tsx
+++ b/react-ts/src/components/MenuMobile/MenuMobile.tsx
@@ -6,10 +6,11 @@ import MenuComponent from './ComponentMobile';
import OpenMobile from '../../assets/images/OpenMobile.svg';
const MenuMobile = () => {
+
const [IsOpen, setIsOpen] = useState(false);
- function openModal (): void {
- setIsOpen(true);
+ const openModal = () => {
+ setIsOpen(true)
}
return (
diff --git a/react-ts/src/components/NewsLetter/NewsLetter.module.scss b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
index a3438ab..08df6bb 100644
--- a/react-ts/src/components/NewsLetter/NewsLetter.module.scss
+++ b/react-ts/src/components/NewsLetter/NewsLetter.module.scss
@@ -75,8 +75,7 @@
line-height: 16px;
}
&__input-button {
- display: flex;
- align-items: center;
+ flex-direction: column;
row-gap: 16px;
input {
max-width: 992px;
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.module.scss b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
new file mode 100644
index 0000000..e5b5b8d
--- /dev/null
+++ b/react-ts/src/components/SocialMedia/SocialMedia.module.scss
@@ -0,0 +1,36 @@
+@import '../../styles/utils/Variables.scss';
+
+
+.container {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ &__picture {
+ display: flex;
+ column-gap: 10px;
+ }
+ a {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 16px;
+ color: $color-black2;
+ }
+}
+
+
+@media only screen and (min-width: 2500px) {
+ .container {
+ &__picture {
+ img {
+ width: 70px;
+ height: 70px;
+ }
+ }
+ a {
+ font-size: 28px;
+ line-height: 33px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/react-ts/src/components/SocialMedia/SocialMedia.tsx b/react-ts/src/components/SocialMedia/SocialMedia.tsx
new file mode 100644
index 0000000..29824a4
--- /dev/null
+++ b/react-ts/src/components/SocialMedia/SocialMedia.tsx
@@ -0,0 +1,28 @@
+import styles from './SocialMedia.module.scss';
+
+import Facebook from '../../assets/images/Facebook.svg';
+import Instagram from '../../assets/images/Instagram.svg';
+import Twitter from '../../assets/images/Twitter.svg';
+import YouTube from '../../assets/images/YouTube.svg';
+import Linkedin from '../../assets/images/Linkedin.svg';
+
+
+const SocialMedia = () => {
+ return (
+
+ )
+}
+
+
+export default SocialMedia;
\ No newline at end of file
diff --git a/react-ts/src/components/Whatsap/WhatsApp.module.scss b/react-ts/src/components/Whatsapp/WhatsApp.module.scss
similarity index 100%
rename from react-ts/src/components/Whatsap/WhatsApp.module.scss
rename to react-ts/src/components/Whatsapp/WhatsApp.module.scss
diff --git a/react-ts/src/components/Whatsap/WhatsApp.tsx b/react-ts/src/components/Whatsapp/WhatsApp.tsx
similarity index 100%
rename from react-ts/src/components/Whatsap/WhatsApp.tsx
rename to react-ts/src/components/Whatsapp/WhatsApp.tsx