feat(home): adicionando react-router, navbar Main e ajustando a abertura das uls no footer com accordion

2023-01-06 11:16:36 -03:00 · 2023-01-06 11:16:36 -03:00 · 585b4b5675
commit 585b4b5675
parent 0e638b829c
25 changed files with 583 additions and 121 deletions
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "node-sass": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "typescript": "^4.4.2",
--- a/src/_variaveis.scss
+++ b/src/_variaveis.scss
@ -4,15 +4,18 @@ $font-family: 'Roboto', sans-serif;

 /* Colors */
 $color-black: #000;
+$color-black2: #292929;
 $color-black-transparent: rgba(69, 69, 69, 0.7);
 $color-black-500: #303030;

 $color-white: #fff;
-$color-primary-700: #F2F2F2;

+$color-primary-300: #7D7D7D;
 $color-primary-400: #C4C4C4;
 $color-primary-500: #C6C6C6;
 $color-primary-600: #E5E5E5;
+$color-primary-700: #F2F2F2;
+



--- a/src/components/Accordion/@types/index.d.ts
+++ b/src/components/Accordion/@types/index.d.ts
@ -0,0 +1,19 @@
+export interface IDefaultProps {
+    customKey: string | number,
+    children: ReactNode | ReactNode[],
+}
+
+
+export interface IAccordionContextProps {
+    current: number | string,
+    handleSetCurrent: (customKey: string | number) => void,
+}
+
+export interface IAccordionProviderProps {
+    children: ReactNode | ReactNode[],
+    value: IAccordionContextProps,
+}
+
+export interface IRootProps extends IDefaultProps{}
+export interface IHeaderProps extends IDefaultProps{}
+export interface IContentProps extends Omit <IDefaultProps, 'customKey'>{}
--- a/src/components/Accordion/context/ContentAccordion.tsx
+++ b/src/components/Accordion/context/ContentAccordion.tsx
@ -0,0 +1,15 @@
+import { createContext } from "react";
+
+import { IAccordionContextProps, IAccordionProviderProps } from "../@types";
+
+export const AccordionContext = createContext<IAccordionContextProps>({
+    current : '',
+}as IAccordionContextProps)
+
+export const AccordionProvider = ({children, value}: IAccordionProviderProps ) => {
+    return (
+        <AccordionContext.Provider  value={value}>
+            {children}
+        </ AccordionContext.Provider>
+    )
+}
--- a/src/components/Accordion/index.module.scss
+++ b/src/components/Accordion/index.module.scss
@ -0,0 +1,58 @@
+@import '../../variaveis';
+
+.accordion {
+    @media #{$mq-tablet}, #{$mq-mobile} {
+        width: 100%;
+        display: flex;
+        align-items: center;
+    }
+}
+    .accordionContent {
+        @media #{$mq-tablet}, #{$mq-mobile} {
+            display: none;
+        }
+    }
+
+    .accordionHeader {
+        margin-bottom: 12px;
+        @media #{$mq-tablet}, #{$mq-mobile} {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            &__icon::after {
+                content: '+';
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 16px;
+                text-transform: uppercase;
+                color: $color-black-500;
+
+            }
+        }
+    }
+    .opened {
+        .accordionContent {
+            @media #{$mq-tablet}, #{$mq-mobile} {
+                display: block;
+                margin-bottom: 12px;
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 16px;
+                text-transform: uppercase;
+                color: $color-black-500;
+            }
+        }
+
+        .accordionHeader {
+            &__icon::after {
+                content: '-';
+            }
+        }
+    }
+
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@ -0,0 +1,49 @@
+import { useContext } from "react";
+
+import { AccordionContext } from "./context/ContentAccordion";
+
+import styles from './index.module.scss';
+
+import { IContentProps, IRootProps, IHeaderProps } from "./@types";
+
+const Root = ({customKey, children}: IRootProps) => {
+    const {current} = useContext(AccordionContext);
+
+    const Opened = () => {
+        if (current === customKey) {
+            return styles.opened
+        } else {
+            return '';
+        }
+    }
+
+    return (
+
+        <div className={`${styles["accordion"]} ${Opened()}`}>
+            {children}
+        </div>
+    )
+}
+
+const Header = ({customKey, children}: IHeaderProps) => {
+    const {handleSetCurrent} = useContext(AccordionContext);
+
+    return (
+        <header className={styles['accordionHeader']} onClick={()=> handleSetCurrent(customKey)}>
+            {children}
+            <i className={styles['accordionHeader__icon']}></i>
+        </header>
+    )
+}
+
+const Content = ({children}:IContentProps) => {
+    return (
+        <div className={styles['accordionContent']}>
+            {children}
+        </div>
+    )
+}
+
+const Accordion = Object.assign(Root, {Header, Content});
+
+export { Accordion }
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@ -1,5 +1,12 @@
+@import '../../variaveis';
+
 .footer {
-    position: absolute;
+    position: relative;
    bottom: 0;
    width: 100%;
+    margin-top: 84px;
+
+    @media #{$mq-desktop}, #{$mq-tablet},#{$mq-mobile} {
+        margin-top: 80px;
+    }
 }
--- a/src/components/Footer/FooterTop/FooterTop.scss
+++ b/src/components/Footer/FooterTop/FooterTop.scss
@ -3,7 +3,7 @@
 .footer__top {
    width: calc(100% - 200px);
    display: flex;
-    align-items: center;
+    align-items: flex-start;
    justify-content: space-between;
    padding: 50px 100px;

@ -27,7 +27,7 @@
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
-        align-items: center;
+        align-items: flex-start;
        margin-right: 121px;

        @media #{$mq-tablet}, #{$mq-mobile} {
@ -38,7 +38,6 @@

        &__title {
            width: 100%;
-            margin-bottom: 12px;
            font-family: $font-family;
            font-style: normal;
            font-weight: 500;
@ -57,24 +56,6 @@
                display: flex;
                align-items: center;
                justify-content: space-between;
-
-                &::after {
-                    content: '+';
-                    font-family: $font-family;
-                    font-style: normal;
-                    font-weight: 500;
-                    font-size: 14px;
-                    line-height: 16px;
-                    text-transform: uppercase;
-                    color: $color-black-500;
-
-                }
-            }
-
-            &.opened {
-                &::after {
-                    content: '-';
-                }
            }

            &.opened ~ .footer__top__block__item-list{
@ -91,10 +72,6 @@
            padding: 0px;
            gap: 12px;

-            @media #{$mq-tablet}, #{$mq-mobile} {
-                display: none;
-            }
-
        }
        &__item:last-child {
            text-decoration: underline;
--- a/src/components/Footer/FooterTop/FooterTop.tsx
+++ b/src/components/Footer/FooterTop/FooterTop.tsx
@ -8,112 +8,128 @@ import twitter from '../../../assets/imgs/logo-twitter.png';
 import youtube from '../../../assets/imgs/logo-youtube.png';
 import linkedin from '../../../assets/imgs/logo-linkedin.png';

+import { Accordion } from '../../Accordion';
+import { AccordionProvider } from '../../Accordion/context/ContentAccordion';
+
 const FooterTop = () => {

-    const [ulIsVisible, setUlIsVisible] = useState(false);
+    const [ulIsVisible, setUlIsVisible] = useState<string | number | ''>('');

-    const handleClick = () => {
-        const titles = document.querySelectorAll('.footer__top__block__title');
-
-        for (let index = 0; index < titles.length; index++) {
-            const element = titles[index];
-
-            element.addEventListener('click', () => {
-                if (ulIsVisible) {
-                    setUlIsVisible(false)
-                    element.classList.remove('opened');
-                } else {
-                    setUlIsVisible(true)
-                    element.classList.add('opened')
-                }
-            })
+    const handleSetCurrent = (customKey: string | number | '') => {
+        if (window.innerWidth < 1025) {
+            if (customKey === ulIsVisible) {
+                setUlIsVisible('')
+            }else {
+                setUlIsVisible(customKey)
+            }
        }
+        console.log('funcionando', customKey);

    }

    return (
        <section className={'footer__top'}>
            <div className={'footer__top__wrapper'}>
-                <div className={'footer__top__block'}>
-                    <h4 className={`footer__top__block__title`}   onClick={handleClick}> INSTITUCIONAL </h4>
+                <AccordionProvider value={{current:ulIsVisible, handleSetCurrent}}>
+                    <Accordion customKey={1}>
+                        <div className={'footer__top__block'}>
+                            <Accordion.Header customKey={1}>
+                                <h4 className={`footer__top__block__title`}> INSTITUCIONAL </h4>
+                            </Accordion.Header>
+                            <Accordion.Content>
+                                <ul className={'footer__top__block__item-list'}>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Quem Somos
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Política de Privacidade
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Segurança
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Seja um Revendedor
+                                        </a>
+                                    </li>
+                                </ul>
+                            </Accordion.Content>
+                        </div>
+                    </Accordion>

-                    <ul className={'footer__top__block__item-list'}>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Quem Somos
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Política de Privacidade
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Segurança
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Seja um Revendedor
-                            </a>
-                        </li>
-                    </ul>
-                </div>
+                    <Accordion customKey={2}>
+                        <div className={'footer__top__block'}>
+                            <Accordion.Header customKey={2}>
+                                <h4 className={`footer__top__block__title`} > DÚVIDAS </h4>
+                            </Accordion.Header>
+                            <Accordion.Content>
+                                <ul className={'footer__top__block__item-list'}>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Entrega
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Pagamento
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="/" className={'footer__top__block__link'}>
+                                            Trocas e Devoluções
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                    <a href="/" className={'footer__top__block__link'}>
+                                            Dúvidas Frequentes
+                                        </a>
+                                    </li>
+                                </ul>
+                            </Accordion.Content>
+                        </div>
+                    </Accordion>

-                <div className={'footer__top__block'}>
-                    <h4 className={`footer__top__block__title`}   onClick={handleClick}> DÚVIDAS </h4>
+                    <Accordion customKey={3}>
+                        <div className={'footer__top__block'}>
+                            <Accordion.Header customKey={3}>
+                                <h4 className={`footer__top__block__title`}>  Fale Conosco </h4>
+                            </Accordion.Header>
+                            <Accordion.Content>
+                                <ul className={'footer__top__block__item-list'}>
+                                    <li className={'footer__top__block__item'}>
+                                        <span className={'footer__top__block__link'}>
+                                            <strong>Atendimento Ao <br/> Consumidor</strong>
+                                        </span>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="http://wa.me/(11)4159 9504" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
+                                            (11) 4159 9504
+                                        </a>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <span className={'footer__top__block__link'}>
+                                            <strong>Atendimento Online</strong>
+                                        </span>
+                                    </li>
+                                    <li className={'footer__top__block__item'}>
+                                        <a href="http://wa.me/(11)99433-8825" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
+                                            (11) 99433-8825
+                                        </a>
+                                    </li>
+                                </ul>
+                            </Accordion.Content>
+                        </div>
+                    </Accordion>
+                </AccordionProvider>

-                    <ul className={'footer__top__block__item-list'}>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Entrega
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Pagamento
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="/" className={'footer__top__block__link'}>
-                                Trocas e Devoluções
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                        <a href="/" className={'footer__top__block__link'}>
-                                Dúvidas Frequentes
-                            </a>
-                        </li>
-                    </ul>
-                </div>

-                <div className={'footer__top__block'}>
-                    <h4 className={`footer__top__block__title`}   onClick={handleClick}>  Fale Conosco </h4>

-                    <ul className={'footer__top__block__item-list'}>
-                        <li className={'footer__top__block__item'}>
-                            <span className={'footer__top__block__link'}>
-                                <strong>Atendimento Ao <br/> Consumidor</strong>
-                            </span>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="http://wa.me/(11)4159 9504" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
-                                (11) 4159 9504
-                            </a>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <span className={'footer__top__block__link'}>
-                                <strong>Atendimento Online</strong>
-                            </span>
-                        </li>
-                        <li className={'footer__top__block__item'}>
-                            <a href="http://wa.me/(11)99433-8825" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
-                                (11) 99433-8825
-                            </a>
-                        </li>
-                    </ul>
-                </div>
                <div className={'footer__top__block-social'}>
                    <ul className={'footer__top__block-social__social-medias'}>
                        <li className={'footer__top__block-social__social-medias__logo'}>
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@ -1,13 +1,11 @@
 import { HeaderMobile } from "./HeaderMobile/HeaderMobile"
 import { HeaderDesktop } from './HeaderDesktop/HeaderDesktop'
-import { ButtonsFixeds } from "../ButtonsFixed/ButtonsFixed"

 const Header = () => {
    return (
        <>
            <HeaderDesktop />
            <HeaderMobile />
-            <ButtonsFixeds />
        </>
    )
 }
--- a/src/components/Main/Main.module.scss
+++ b/src/components/Main/Main.module.scss
@ -0,0 +1,25 @@
+@import '../../variaveis';
+
+.main {
+    width: calc(100% - 200px);
+    padding: 0 100px;
+
+    &__title {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 56px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: $color-black2;
+        text-align: center;
+        margin-bottom: 80px;
+    }
+
+    &__group {
+        display: flex;
+        align-items: flex-start;
+        width: 100%;
+    }
+}
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@ -0,0 +1,16 @@
+import { Submenu } from "../Submenu/Submenu"
+
+import styles from './Main.module.scss';
+
+export const Main = () => {
+    return (
+        <main className={styles['main']}>
+            <h1 className={styles['main__title']}>
+                Institucional
+            </h1>
+            <div className={styles['main__group']}>
+                <Submenu />
+            </div>
+        </main>
+    )
+}
--- a/src/components/Submenu/NavBar/NavbarSubmenu.module.scss
+++ b/src/components/Submenu/NavBar/NavbarSubmenu.module.scss
@ -0,0 +1,29 @@
+@import '../../../variaveis';
+
+.navbar {
+    width: 25%;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+
+    @media #{$mq-desktop} {
+        width: 28%;
+    }
+
+    &__link{
+        text-decoration: none;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 32px;
+        line-height: 38px;
+        color: $color-primary-300;
+        width: calc(100% - 32px);
+        padding: 10px 16px;
+
+        @media #{$mq-desktop}{
+            font-size: 16px;
+            line-height: 19px;
+        }
+    }
+}
--- a/src/components/Submenu/NavBar/NavbarSubmenu.tsx
+++ b/src/components/Submenu/NavBar/NavbarSubmenu.tsx
@ -0,0 +1,65 @@
+import { NavLink } from "react-router-dom"
+
+import styles from './NavbarSubmenu.module.scss';
+
+export const NavbarSubmenu = () => {
+    return (
+        <div className={styles['navbar']}>
+            <NavLink className={styles['navbar__link']} to='/sobre'
+            style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })}>
+                Sobre
+            </NavLink>
+
+            <NavLink className={styles['navbar__link']}  style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })}
+            to='/formapagamento' >
+                Forma de Pagamento
+            </NavLink>
+
+            <NavLink className={styles['navbar__link']}
+            style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })}
+            to='/entrega'>
+                Entrega
+            </NavLink>
+            <NavLink className={styles['navbar__link']}
+            style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })} to='/trocadevolucao'>
+                Troca e Devolução
+            </NavLink>
+
+            <NavLink className={styles['navbar__link']}
+            style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })}
+            to='/segurancaprivacidade'>
+                Segurança e Privacidade
+            </NavLink>
+
+            <NavLink className={styles['navbar__link']}
+            style={({ isActive }) => ({
+            color: isActive ? "#fff" : "#7d7d7d",
+            background: isActive ? "#000000" : "unset",
+            fontWeight: isActive ? "700" : "400",
+            })}
+            to='/contato'>
+                Contato
+            </NavLink>
+        </div>
+    )
+}
--- a/src/components/Submenu/Submenu.module.scss
+++ b/src/components/Submenu/Submenu.module.scss
@ -0,0 +1,5 @@
+.submenu {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
--- a/src/components/Submenu/Submenu.tsx
+++ b/src/components/Submenu/Submenu.tsx
@ -0,0 +1,32 @@
+import { BrowserRouter as Router, Route, Routes  } from 'react-router-dom'
+
+import { NavbarSubmenu } from './NavBar/NavbarSubmenu';
+
+import { Sobre } from '../Subpages/Sobre';
+import { FormaPagamento } from '../Subpages/FormaPagamento';
+import { Entrega } from '../Subpages/Entrega';
+import { TrocaDevolucao } from '../Subpages/TrocaDevolucao'
+import { SegurancaPrivacidade } from '../Subpages/SegurancaPrivacidade'
+import { Contato } from '../Subpages/Contato';
+
+import styles from './Submenu.module.scss'
+
+const Submenu = () => {
+    return (
+        <section className={styles['submenu']}>
+            <Router>
+                < NavbarSubmenu />
+                <Routes>
+                    <Route path='/sobre' element={<Sobre />} />
+                    <Route path='/formapagamento' element={<FormaPagamento />} />
+                    <Route path='/entrega' element={<Entrega/>} />
+                    <Route path='/trocadevolucao' element={<TrocaDevolucao />} />
+                    <Route path='/segurancaprivacidade' element={<SegurancaPrivacidade/>} />
+                    <Route path='/contato' element={<Contato />} />
+                </Routes>
+            </Router>
+        </section>
+    )
+}
+
+export { Submenu }
--- a/src/components/Subpages/Contato.tsx
+++ b/src/components/Subpages/Contato.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss'
+
+const Contato = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Contato</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { Contato }
--- a/src/components/Subpages/Entrega.tsx
+++ b/src/components/Subpages/Entrega.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss';
+
+const Entrega = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Entrega</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { Entrega }
--- a/src/components/Subpages/FormaPagamento.tsx
+++ b/src/components/Subpages/FormaPagamento.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss'
+
+const FormaPagamento = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Forma de Pagamento</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { FormaPagamento }
--- a/src/components/Subpages/SegurancaPrivacidade.tsx
+++ b/src/components/Subpages/SegurancaPrivacidade.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss';
+
+const SegurancaPrivacidade = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Seguranca e Privacidade</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { SegurancaPrivacidade }
--- a/src/components/Subpages/Sobre.tsx
+++ b/src/components/Subpages/Sobre.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss';
+
+const Sobre = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Sobre</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { Sobre }
--- a/src/components/Subpages/TrocaDevolucao.tsx
+++ b/src/components/Subpages/TrocaDevolucao.tsx
@ -0,0 +1,14 @@
+import styles from './geral.module.scss'
+
+const TrocaDevolucao = () => {
+    return (
+        <div className={styles['container-info']}>
+            <h1 className={styles['container-info__title']}>Troca e Devolução</h1>
+            <p className={styles['container-info__paragrafo']} >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p className={styles['container-info__paragrafo']}>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
+            <p className={styles['container-info__paragrafo']}>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+        </div>
+    )
+}
+
+export { TrocaDevolucao }
--- a/src/components/Subpages/geral.module.scss
+++ b/src/components/Subpages/geral.module.scss
@ -0,0 +1,38 @@
+@import '../../variaveis';
+
+.container-info {
+    width: 73%;
+    padding-left: 30px;
+    border-left: 1px solid $color-black;
+
+    &__title {
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 700;
+        font-size: 48px;
+        line-height: 56px;
+        color: $color-black2;
+        margin-bottom: 12px;
+    }
+
+    &__paragrafo {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 26px;
+        line-height: 30px;
+        color: $color-primary-300;
+        margin-bottom: 12px;
+
+        @media #{$mq-desktop} {
+            font-size: 13px;
+            line-height: 15px;
+        }
+
+        @media #{$mq-tablet}, #{$mq-mobile} {
+            font-size: 12px;
+            line-height: 18px;
+        }
+
+    }
+}
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -1,14 +1,19 @@
 import styles from './Home.module.scss'

-import { Footer } from '../components/Footer/Footer';
 import { Header } from '../components/Header/Header';
 import { BreadCrumbs } from '../components/Breadcrumbs/Breadcrumbs';
+import { Main } from '../components/Main/Main';
+import { ButtonsFixeds } from '../components/ButtonsFixed/ButtonsFixed';
+import { Footer } from '../components/Footer/Footer';
+

 function Home() {
    return (
        <div className={styles['home']}>
            <Header />
            <BreadCrumbs />
+            <Main/>
+            <ButtonsFixeds />
            <Footer />
        </div>
    );
--- a/yarn.lock
+++ b/yarn.lock
@ -1634,6 +1634,11 @@
    schema-utils "^3.0.0"
    source-map "^0.7.3"

+"@remix-run/router@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.1.tgz#812edd4104a15a493dda1ccac0b352270d7a188c"
+  integrity sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==
+
 "@rollup/plugin-babel@^5.2.0":
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@ -8205,6 +8210,21 @@ react-refresh@^0.11.0:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
  integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==

+react-router-dom@^6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.1.tgz#1b96ec0b2cefa7319f1251383ea5b41295ee260d"
+  integrity sha512-u+8BKUtelStKbZD5UcY0NY90WOzktrkJJhyhNg7L0APn9t1qJNLowzrM9CHdpB6+rcPt6qQrlkIXsTvhuXP68g==
+  dependencies:
+    "@remix-run/router" "1.2.1"
+    react-router "6.6.1"
+
+react-router@6.6.1:
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.1.tgz#17de6cf285f2d1c9721a3afca999c984e5558854"
+  integrity sha512-YkvlYRusnI/IN0kDtosUCgxqHeulN5je+ew8W+iA1VvFhf86kA+JEI/X/8NqYcr11hCDDp906S+SGMpBheNeYQ==
+  dependencies:
+    "@remix-run/router" "1.2.1"
+
 react-scripts@5.0.1:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"