diff --git a/package.json b/package.json index 6cf75a7..fbb8d79 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-headless-accordion": "^1.0.2", "react-scripts": "5.0.1", "typescript": "^4.4.2", "web-vitals": "^2.1.0" diff --git a/src/components/Footer/Accordion/Accordion.tsx b/src/components/Footer/Accordion/Accordion.tsx deleted file mode 100644 index d8dd904..0000000 --- a/src/components/Footer/Accordion/Accordion.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { AccordionSection } from "./AccordionSection"; - -// trocar para "menu fotter" -export const Accordion = () => { - return ( -
- ); -} \ No newline at end of file diff --git a/src/components/Footer/Accordion/AccordionSection.tsx b/src/components/Footer/Accordion/AccordionSection.tsx deleted file mode 100644 index d88cd23..0000000 --- a/src/components/Footer/Accordion/AccordionSection.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from "react"; - -export const AccordionSection = () => { - - return ( -
- -
- ); - - -} \ No newline at end of file diff --git a/src/components/Footer/MenuFotter.tsx b/src/components/Footer/MenuFotter.tsx deleted file mode 100644 index 973d560..0000000 --- a/src/components/Footer/MenuFotter.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export const MenuFotter = () => { - -} \ No newline at end of file diff --git a/src/components/Footer/SocialMedia/SocialMedia.module.scss b/src/components/Footer/SocialMedia/SocialMedia.module.scss new file mode 100644 index 0000000..5ea9d28 --- /dev/null +++ b/src/components/Footer/SocialMedia/SocialMedia.module.scss @@ -0,0 +1,29 @@ +.wrapper { + &__social__media { + display: flex; + column-gap: 10px; + width: 100%; + max-width: 215px; + + @media (min-width: 2500px) { + max-width: 390px; + + } + + li { + a { + img { + + width: 35px; + height: 35px; + + @media (min-width: 2500px) { + width: 70px; + height: 70px; + } + } + } + } + } + +} \ No newline at end of file diff --git a/src/components/Footer/SocialMedia/SocialMedia.tsx b/src/components/Footer/SocialMedia/SocialMedia.tsx new file mode 100644 index 0000000..929c1d2 --- /dev/null +++ b/src/components/Footer/SocialMedia/SocialMedia.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { IconLink } from "../../utils/IconLink"; + +import facebook from "./assets/svgs/facebook.svg"; +import instagram from "./assets/svgs/instagram.svg"; +import twitter from "./assets/svgs/twitter.svg"; +import youtube from "./assets/svgs/youtube.svg"; +import linkedin from "./assets/svgs/linkedin.svg"; + +import styleSocialMedia from "./SocialMedia.module.scss"; + +export const SocialMedia = () => { + + return ( + +
+
+ + + + + +
+
+ + www.loremipsum.com + +
+
+ ) +} \ No newline at end of file diff --git a/src/components/Footer/SocialMedia/assets/svgs/facebook.svg b/src/components/Footer/SocialMedia/assets/svgs/facebook.svg new file mode 100644 index 0000000..303ad4a --- /dev/null +++ b/src/components/Footer/SocialMedia/assets/svgs/facebook.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Footer/SocialMedia/assets/svgs/instagram.svg b/src/components/Footer/SocialMedia/assets/svgs/instagram.svg new file mode 100644 index 0000000..1e5df92 --- /dev/null +++ b/src/components/Footer/SocialMedia/assets/svgs/instagram.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Footer/SocialMedia/assets/svgs/linkedin.svg b/src/components/Footer/SocialMedia/assets/svgs/linkedin.svg new file mode 100644 index 0000000..a647459 --- /dev/null +++ b/src/components/Footer/SocialMedia/assets/svgs/linkedin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/Footer/SocialMedia/assets/svgs/twitter.svg b/src/components/Footer/SocialMedia/assets/svgs/twitter.svg new file mode 100644 index 0000000..429d79f --- /dev/null +++ b/src/components/Footer/SocialMedia/assets/svgs/twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Footer/SocialMedia/assets/svgs/youtube.svg b/src/components/Footer/SocialMedia/assets/svgs/youtube.svg new file mode 100644 index 0000000..8894c8b --- /dev/null +++ b/src/components/Footer/SocialMedia/assets/svgs/youtube.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Header/HeaderMobile/HeaderMobile.tsx b/src/components/Header/HeaderMobile/HeaderMobile.tsx index b2900c4..69bfd57 100644 --- a/src/components/Header/HeaderMobile/HeaderMobile.tsx +++ b/src/components/Header/HeaderMobile/HeaderMobile.tsx @@ -16,9 +16,7 @@ export const HeaderMobile = () => {
- Menu Hamburguer setisOpenMenu(true)} /> -
< img src={logo} alt="Logo M3" className={styleHeader["container__logo__img"]} /> diff --git a/src/components/utils/IconLink.tsx b/src/components/utils/IconLink.tsx new file mode 100644 index 0000000..c0e5ceb --- /dev/null +++ b/src/components/utils/IconLink.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + + +interface IconLink { + link: string; + sourceImg: string; + altText: string; +} +export const IconLink = ({ link, sourceImg, altText }: IconLink) => { + return ( +
  • + + {altText} + +
    • + ) + +} + diff --git a/src/components/utils/ListItem.tsx b/src/components/utils/ListItem.tsx new file mode 100644 index 0000000..534c440 --- /dev/null +++ b/src/components/utils/ListItem.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + + + +interface ListItemProps { + link?: string; + title: string; +} +export const ListItem = ({ link, title }: ListItemProps) => { + return ( +
  • + + {title} + +
    • + ) + +} + diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 5065327..7b534dd 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Rodape } from "../components/Footer/Rodape/Rodape"; +import { SocialMedia } from "../components/Footer/SocialMedia/SocialMedia"; import { Header } from "../components/Header/Header"; import { NewsLetter } from "../components/NewsLetter/NewsLetter"; @@ -8,7 +9,7 @@ export const Home = () => { return ( <>
    - + diff --git a/yarn.lock b/yarn.lock index bee706e..c3423a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8061,6 +8061,11 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-headless-accordion@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-headless-accordion/-/react-headless-accordion-1.0.2.tgz#df45168fc379a9014bd7becc2f4be100af456b6e" + integrity sha512-wKBTB/+aAr9MGX5RYi3sdmKOSzevKdmbGRw9JTe7XONiHlTo+pC1OiggL9NUxp5QeQcTnX0rryhuySeGsqBfBg== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"