diff --git a/src/components/Footer/Accordion/AccordionElement.tsx b/src/components/Footer/Accordion/AccordionElement.tsx new file mode 100644 index 0000000..b591a12 --- /dev/null +++ b/src/components/Footer/Accordion/AccordionElement.tsx @@ -0,0 +1,15 @@ +import React, { ReactNode } from "react"; + +interface AccordionProps { + children: ReactNode +} + +{/* Recebe List Items como filho */ } +export const AccordionElement = ({ children }: AccordionProps) => { + return ( + <> + {children} + + + ); +} diff --git a/src/components/Footer/Accordion/AccordionFooter.tsx b/src/components/Footer/Accordion/AccordionFooter.tsx new file mode 100644 index 0000000..101c7b2 --- /dev/null +++ b/src/components/Footer/Accordion/AccordionFooter.tsx @@ -0,0 +1,119 @@ +import React, { useState } from "react"; +import styleAccordion from "./styles/Accordion.module.scss"; + +import { ListItem } from "../../utils/ListItem"; +import { AccordionElement } from "./AccordionElement"; +import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-headless-accordion"; + + +export const AccordionFooter = () => { + + return ( + + +
+ + +
Intitucional
+ + + + + + + + + + + + +
+ + + + +
+ + +
Duvidas
+ + + + + +
+ + + + + + +
+ +
+ + + +
+ + +
Fale Conosco
+ + + + + + + + + + + + + + + + + + +
+ + + ); + + +} + + diff --git a/src/components/Footer/Accordion/styles/Accordion.module.scss b/src/components/Footer/Accordion/styles/Accordion.module.scss new file mode 100644 index 0000000..70df377 --- /dev/null +++ b/src/components/Footer/Accordion/styles/Accordion.module.scss @@ -0,0 +1,91 @@ +.accordion { + padding: 0 16px; + display: flex; + justify-content: space-between; + + @media (max-width:1024px) { + flex-direction: column; + } +} + +.toggle__accordion { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .icon__plus { + + @media (min-width:1025px) { + display: none; + } + } + + span { + h5 { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + + text-transform: uppercase; + + color: #303030; + + @media (min-width:2500px) { + font-size: 28px; + line-height: 33px; + } + } + } +} + +.accordion__body { + display: flex; + flex-direction: column; + row-gap: 12px; + + @media (min-width:1025px) { + overflow: visible !important; + } + + li { + a { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + text-transform: capitalize; + + color: #303030; + + @media (min-width:2500px) { + font-size: 24px; + line-height: 28px; + } + + } + } + + .contact__us { + max-width: 155px; + + @media (min-width:2500px) { + max-width: none; + } + + li { + a { + font-weight: 500; + + @media (min-width:2500px) { + font-size: 24px; + line-height: 28px; + } + } + } + + } +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7b534dd..7158afa 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { AccordionFooter } from "../components/Footer/Accordion/AccordionFooter"; import { Rodape } from "../components/Footer/Rodape/Rodape"; import { SocialMedia } from "../components/Footer/SocialMedia/SocialMedia"; import { Header } from "../components/Header/Header"; @@ -9,6 +10,7 @@ export const Home = () => { return ( <>
+