Merge pull request 'feat: cria estrutura base do footer da pagina e todo o rodape da pagina responsivo' (#3) from feature/footer into development

Reviewed-on: #3

src/_variaveis.scss

@@ -0,0 +1,41 @@
+// /* fonts */
+// @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
+$font-family: "Roboto", sans-serif;
+// $font-family-secundary: "Tenor Sans", sans-serif;
+
+/* Colors */
+$color-black: #292929;
+$color-black2: #000000;
+
+$color-white: #fff;
+
+$color-gray: #6c6c6c;
+$color-gray2: #7d7d7d;
+$color-gray3: #f0f0f0;
+$color-gray4: #8d8d8d;
+$color-gray5: #e5e5e5;
+$color-gray6: #C4C4C4;
+$color-gray7: #e0e0e0;
+
+$color-blue: #4267b2;
+$color-blue2: #00C8FF;
+;
+
+$color-green: #4caf50;
+
+/* Grid breakpoints */
+$grid-breakpoints: (
+	xs: 0,
+	cstm: 400,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px) !default;
+
+$z-index: (
+	level1: 5,
+	level2: 10,
+	level3: 15,
+	level4: 20,
+	level5: 25) !default;

src/components/Footer/Accordion/Accordion.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { AccordionSection } from "./AccordionSection";
+
+// trocar para "menu fotter"
+export const Accordion = () => {
+    return (
+        <div></div>
+    );
+}

src/components/Footer/Accordion/AccordionSection.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const AccordionSection = () => {
+
+    return (
+        <div >
+
+        </div>
+    );
+
+
+}

src/components/Footer/MenuFotter.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const MenuFotter = () => {
+
+}

src/components/Footer/NewsLetter.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const NewsLetter = () => {
+
+}

src/components/Footer/Rodape/DevelopedBy.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+
+interface RodapeDevelopedByProps {
+    link: string;
+    description: string;
+    source: string;
+    altText: string;
+}
+export const DevelopedBy = ({ link, description, source, altText }: RodapeDevelopedByProps) => {
+    return (
+        <>
+            <li>
+                <a href={link}>
+                    <span>{description}</span>
+                    <img src={source} alt={altText} />
+                </a>
+            </li>
+        </>
+    )
+}
+

src/components/Footer/Rodape/Rodape.module.scss

@@ -0,0 +1,254 @@
+@import "../../../variaveis";
+
+/* _footer.scss */
+.footer {
+
+    color: $color-gray2;
+    bottom: 0;
+    width: 100%;
+    background-color: #000;
+
+    &__wrapper {
+
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0 7.8125%;
+
+        @media (max-width: 1024px) {
+            flex-direction: column;
+            align-items: flex-start;
+            margin: 0 16px;
+
+        }
+
+        // .container {
+        //     width: 94.9734%;
+
+        //     align-items: center;
+        //     display: flex;
+        //     justify-content: space-between;
+
+        //     @media (max-width: 1024px) {
+        //         flex-direction: column;
+        //         align-items: flex-start;
+        //         margin: 0 16px;
+
+        //     }
+        // }
+    }
+
+    &__address {
+        color: #fff;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 10px;
+        line-height: 12px;
+        text-transform: capitalize;
+        width: 100%;
+        max-width: 269px;
+
+        @media(min-width:2500px) {
+            font-size: 20px;
+            line-height: 27px;
+            max-width: none;
+            width: 537px;
+            min-width: 537px;
+        }
+
+        @media(max-width:1024px) {
+            margin-bottom: 16px;
+            order: 2;
+        }
+
+
+
+
+    }
+
+    &__stamps {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        justify-self: center;
+        list-style: none;
+        column-gap: 11px;
+
+
+        @media (min-width: 2500px) {
+            min-width: 690px;
+
+        }
+
+
+        @media (max-width: 1024px) {
+            justify-content: flex-start;
+            margin: 0;
+            margin-bottom: 23px;
+
+            order: 1;
+            padding: 0;
+        }
+
+        span {
+            img {
+                width: 36px;
+                height: 20.2px;
+                @media(min-width:2500px) {
+                    width: 70px;
+                    height: 39.27px;
+                }
+
+                @media (max-width: 1024px) {
+                    width: 35px;
+                    height: 20.13px;
+                }
+
+                @media (max-width: 490px) {
+                    width: 30px;
+                    height: 17px;
+                  
+                }
+                @media (max-width: 370px) {
+                  column-gap: 5.5px;
+                  width: 18px;
+                  width: 19px;
+                    
+                }
+
+
+            }
+        }
+
+
+        &__divider {
+            background-color: $color-gray4;
+            display: inline-block;
+            height: 24px;
+            margin: 0 8px;
+            width: 1px !important;
+            min-width: 1px !important;
+        }
+
+    }
+
+    &__vtexpci {
+        img {
+            width: 53px;
+            height: 33px;
+
+            @media(min-width:2500px) {
+                width: 103.52px;
+                height: 64.44px;
+            }
+        }
+    }
+
+    &__developedBy {
+        align-items: center;
+        display: flex;
+
+        list-style-type: none;
+        margin: 0;
+        max-width: 217px;
+        width: 100%;
+
+        margin: 0;
+
+        @media(min-width:2500px) {
+            min-width: 388.98px;
+        }
+
+        @media(max-width:1024px) {
+            order: 3;
+            padding: 0;
+        }
+
+        li {
+            width: 100%;
+            min-width: 108.5px;
+
+            @media(min-width:2500px) {
+                min-width: 189PX;
+            }
+        }
+
+
+
+        li:last-child {
+            margin-left: 16px;
+
+            a {
+                span {
+                    width: 100%;
+                    font-weight: 400;
+                    font-size: 9px;
+                    line-height: 12px;
+
+
+                    @media(min-width:2500px) {
+                        font-size: 18px;
+                        line-height: 25px;
+                    }
+                }
+
+                img {
+
+                    width: 28.66px;
+                    height: 15.65px;
+
+                    @media(min-width:2500px) {
+                        width: 55.98px;
+                        height: 30.55px;
+                    }
+                }
+
+            }
+        }
+
+
+        a {
+            align-items: center;
+            color: $color-gray2;
+            display: flex;
+            font-family: $font-family;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 10px;
+            line-height: 12px;
+            text-decoration: none;
+            color: #fff;
+            text-transform: capitalize;
+
+            @media(min-width:2500px) {
+                font-size: 18px;
+                line-height: 25px;
+            }
+
+            span {
+                margin-right: 8px;
+                width: 100%;
+
+                @media(min-width:2500px) {
+                    margin-right: 10px;
+                    min-width: 100px;
+                }
+
+
+
+            }
+
+            img {
+                width: 44.92px;
+                height: 16px;
+
+                @media(min-width:2500px) {
+                    width: 87.73px;
+                    height: 31.24px;
+                }
+            }
+        }
+    }
+}

src/components/Footer/Rodape/Rodape.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import paymantMasterCard from "../assets/img/masterCardM3Academy.png";
+import paymantVisa from "../assets/img/visaM3Academy.png";
+import paymantAmex from "../assets/img/amexM3Academy.png";
+import paymantElo from "../assets/img/eloM3Academy.png";
+import paymantHiperCard from "../assets/img/hiperCardM3Academy.png";
+import paymantPayPal from "../assets/img/payPalM3Academy.png";
+import paymantBoleto from "../assets/img/boletoM3Academy.png";
+import paymantVtexPCI from "../assets/img/vtexPCIM3Academy.png";
+import developByM3 from "../assets/svgs/logoM3M3Academy.svg";
+import developByVtex from "../assets/svgs/logoVTEXM3Academy.svg";
+
+import styleRodape from "./Rodape.module.scss";
+import { RodapeStamp } from './RodapeStamp';
+import { DevelopedBy } from './DevelopedBy';
+
+export const Rodape = () => {
+    return (
+        <footer className={styleRodape["footer"]}>
+            <div className={styleRodape["footer__wrapper"]}>
+                <div className={styleRodape["footer__address"]}>
+                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing
+                        elit, sed do eiusmod tempor</span>
+                </div>
+                <ul className={styleRodape["footer__stamps"]}>
+                    <RodapeStamp
+                        source={paymantMasterCard}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantVisa}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantAmex}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantElo}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantHiperCard}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantPayPal}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <RodapeStamp
+                        source={paymantBoleto}
+                        altText={"Formas de pagamentos aceitas"}
+                    />
+                    <li>
+                        <span className={styleRodape["footer__stamps__divider"]}></span>
+                    </li>
+                    <RodapeStamp source={paymantVtexPCI} altText={"Formas de pagamentos aceitas"} />
+                </ul>
+                <ul className={styleRodape["footer__developedBy"]}>
+                    <DevelopedBy
+                        link={"https://vtex.com/br-pt/"}
+                        description={"Powered By"}
+                        source={developByVtex}
+                        altText={"Powered By"}
+                    />
+                    <DevelopedBy
+                        link={"https://agenciam3.com/"}
+                        description={"Developed By"}
+                        source={developByM3}
+                        altText={"developByVtex"}
+                    />
+                </ul>
+            </div>
+        </footer>
+    );
+}
+

src/components/Footer/Rodape/RodapeStamp.tsx

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+import styleRodape from "./Rodape.module.scss";
+
+
+
+interface RodapeStampProps {
+    source: string;
+    altText: string;
+}
+export const RodapeStamp = ({ source, altText }: RodapeStampProps) => {
+    return (
+        <li>
+            <span className={styleRodape["footer__payments"]}>
+                <img src={source} alt={altText} />
+            </span>
+        </li>
+    )
+
+}
+

src/components/Footer/assets/svgs/logoM3M3Academy.svg

@@ -0,0 +1,4 @@
+<svg width="55" height="31" viewBox="0 0 55 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.0509 10.5038C31.193 9.36605 30.1154 8.41986 28.8848 7.72371C27.6543 7.02756 26.2968 6.59626 24.8963 6.45646C23.4959 6.31666 22.0822 6.47133 20.7426 6.91091C19.4031 7.35049 18.1662 8.06564 17.1083 9.01217L16.1944 8.30363C9.91571 3.79137 1.12377 7.62306 0.301235 15.3517C0.0510173 19.0751 -0.0130404 22.8091 0.109311 26.5391C0.0891261 27.0178 0.1656 27.4956 0.333985 27.9428C0.502371 28.3901 0.759074 28.7972 1.08816 29.1391C1.41725 29.4809 1.8117 29.75 2.24702 29.9299C2.68235 30.1097 3.14926 30.1963 3.61878 30.1844C4.07828 30.1823 4.53264 30.0856 4.95456 29.8999C5.37647 29.7142 5.75722 29.4434 6.07393 29.1038C6.39065 28.7641 6.63678 28.3627 6.79754 27.9236C6.9583 27.4845 7.03038 27.0167 7.00943 26.5485C7.00943 23.8635 7.00943 21.1785 7.00943 18.4842C7.00204 17.6854 7.05705 16.8874 7.17394 16.0975C7.32135 15.2891 7.76335 14.5677 8.41104 14.0782C9.05873 13.5887 9.86408 13.3675 10.6651 13.4592C11.4482 13.5194 12.1828 13.8689 12.7313 14.4421C13.2798 15.0154 13.6045 15.773 13.6445 16.573C13.6902 17.5612 13.6445 18.5494 13.6445 19.5377C13.6445 21.943 13.6445 24.3483 13.6445 26.7536C13.6351 27.4512 13.8385 28.1346 14.2266 28.7091C14.6146 29.2837 15.1681 29.721 15.8105 29.9606C18.141 30.9488 20.5172 29.2148 20.5629 26.4832C20.5629 23.3041 20.5629 20.125 20.6543 16.9459C20.6851 16.1774 20.9153 15.431 21.3215 14.783C21.7082 14.2116 22.2686 13.786 22.9162 13.572C23.5637 13.358 24.2623 13.3675 24.904 13.599C25.6279 13.806 26.2608 14.2589 26.6979 14.8828C27.135 15.5067 27.3501 16.2642 27.3077 17.0298C27.3077 20.2462 27.3077 23.4626 27.3077 26.679C27.3077 27.1405 27.3968 27.5976 27.5699 28.024C27.7431 28.4504 27.9969 28.8379 28.3168 29.1643C28.6368 29.4906 29.0166 29.7495 29.4346 29.9262C29.8526 30.1028 30.3007 30.1937 30.7532 30.1937C31.2056 30.1937 31.6537 30.1028 32.0717 29.9262C32.4897 29.7495 32.8695 29.4906 33.1895 29.1643C33.5094 28.8379 33.7632 28.4504 33.9364 28.024C34.1095 27.5976 34.1986 27.1405 34.1986 26.679C34.1986 23.388 34.1986 20.153 34.1986 16.8154C34.2049 14.524 33.4476 12.2985 32.0509 10.5038Z" fill="white"/>
+<path d="M49.315 12.3683L48.2275 11.9115C49.3059 11.0538 50.3295 10.3173 51.2434 9.47821C52.0554 8.82607 52.7563 8.04174 53.318 7.15682C54.9631 4.02434 52.6417 0.379101 48.9586 0.295195C45.5588 0.248581 42.1682 0.248581 38.7684 0.248581C38.3519 0.219225 37.9341 0.280017 37.5423 0.426971C37.1505 0.573925 36.7936 0.803718 36.495 1.10128C36.1964 1.39883 35.9629 1.75743 35.8097 2.15354C35.6565 2.54965 35.5872 2.97433 35.6062 3.39971C35.5655 3.83297 35.6176 4.27008 35.759 4.68075C35.9004 5.09141 36.1276 5.4658 36.4249 5.77797C36.7223 6.09014 37.0826 6.33263 37.4809 6.48862C37.8793 6.64461 38.3061 6.71037 38.7318 6.68135C40.3952 6.68135 42.0585 6.68135 43.7218 6.68135C44.0051 6.77458 44.2976 6.77458 44.846 6.77458C42.5886 8.63915 40.5048 10.4105 38.4485 12.1632C37.1233 13.2819 36.7212 14.5032 37.1873 15.8923C37.4349 16.578 37.8962 17.1618 38.5004 17.5542C39.1047 17.9466 39.8185 18.1259 40.5322 18.0646C42.2961 18.0646 44.0691 18.0646 45.833 18.0646C46.2286 17.9899 46.6354 18.0051 47.0246 18.1088C47.4138 18.2125 47.7759 18.4024 48.0851 18.6648C48.3944 18.9273 48.6432 19.256 48.814 19.6275C48.9847 19.9991 49.0732 20.4044 49.0732 20.8148C49.0732 21.2252 48.9847 21.6305 48.814 22.0021C48.6432 22.3736 48.3944 22.7023 48.0851 22.9648C47.7759 23.2272 47.4138 23.4171 47.0246 23.5208C46.6354 23.6245 46.2286 23.6397 45.833 23.565C43.5482 23.565 41.2634 23.565 38.9786 23.565C38.1776 23.6092 37.4238 23.9649 36.8721 24.5588C36.3205 25.1528 36.013 25.9399 36.013 26.7581C36.013 27.5763 36.3205 28.3634 36.8721 28.9574C37.4238 29.5514 38.1776 29.907 38.9786 29.9512C41.3639 29.9512 43.7584 29.9512 46.1437 29.9512C48.2391 29.897 50.2525 29.1097 51.8465 27.7213C53.4406 26.3328 54.5183 24.4277 54.8991 22.3251C55.2027 20.2666 54.8165 18.1638 53.8032 16.3569C52.7898 14.55 51.2085 13.1447 49.315 12.3683Z" fill="white"/>
+</svg>

src/components/Footer/assets/svgs/logoVTEXM3Academy.svg

@@ -0,0 +1,7 @@
+<svg width="86" height="31" viewBox="0 0 86 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M61.688 11.474H58.6746V21.7206C58.6746 21.9124 58.5087 22.0768 58.3152 22.0768H55.9929C55.7994 22.0768 55.6335 21.9124 55.6335 21.7206V11.474H52.5924C52.5095 11.474 52.3989 11.4466 52.3436 11.3918C52.2883 11.337 52.233 11.2548 52.233 11.1453V9.33703C52.233 9.25484 52.2607 9.14525 52.3436 9.09046C52.3989 9.03566 52.5095 8.98087 52.5924 9.00826H61.688C61.8815 9.00826 62.0474 9.14525 62.0474 9.33703V11.1453C62.0474 11.337 61.8815 11.474 61.688 11.474Z" fill="white"/>
+<path d="M71.3915 21.9948C70.2027 22.1592 68.9863 22.2414 67.7975 22.214C65.5029 22.214 63.4847 21.6387 63.4847 18.4332V12.5975C63.4847 9.39207 65.5306 8.84412 67.8252 8.84412C69.014 8.81672 70.2027 8.89891 71.3915 9.0633C71.6403 9.0907 71.7509 9.20028 71.7509 9.41946V11.0633C71.7509 11.2551 71.585 11.4195 71.3915 11.4195H67.6593C66.8299 11.4195 66.5258 11.6934 66.5258 12.6249V14.214H71.2533C71.4468 14.214 71.6127 14.3784 71.6127 14.5702V16.2414C71.6127 16.4332 71.4468 16.5976 71.2533 16.5976H66.5258V18.4606C66.5258 19.3647 66.8299 19.666 67.6593 19.666H71.3915C71.585 19.666 71.7509 19.8304 71.7509 20.0222V21.666C71.7509 21.8578 71.6403 21.9674 71.3915 21.9948Z" fill="white"/>
+<path d="M84.7725 22.0764H81.9526C81.759 22.1038 81.5655 21.9942 81.4826 21.8025L79.0221 17.9668L76.8104 21.7203C76.6998 21.9394 76.5616 22.0764 76.368 22.0764H73.7417C73.6864 22.0764 73.6034 22.0764 73.5481 22.0216C73.4929 21.9668 73.4652 21.9121 73.4652 21.8299C73.4652 21.7751 73.4929 21.7477 73.4929 21.7203L77.3357 15.3641L73.4376 9.33672C73.4099 9.30932 73.4099 9.25452 73.4099 9.22713C73.4099 9.09014 73.5481 8.98055 73.6864 9.00795H76.5892C76.7827 9.00795 76.921 9.17233 77.0316 9.33672L79.2985 12.8984L81.5102 9.33672C81.5932 9.14494 81.759 9.03535 81.9526 9.00795H84.579C84.7172 9.00795 84.8554 9.09014 84.8554 9.22713C84.8554 9.25452 84.8278 9.30932 84.8278 9.33672L80.9573 15.4189L84.9936 21.7203C85.0213 21.7751 85.0489 21.8299 85.0489 21.8847C85.0213 21.9942 84.9107 22.0764 84.7725 22.0764Z" fill="white"/>
+<path d="M48.0031 9.03577C47.8649 9.03577 47.7543 9.11796 47.7266 9.25494L45.1555 18.707C45.1279 18.8988 45.0726 18.981 44.9067 18.981C44.7409 18.981 44.6856 18.8988 44.6579 18.707L42.0868 9.25494C42.0592 9.11796 41.9486 9.03577 41.8104 9.03577H39.2669C39.184 9.03577 39.101 9.06316 39.0458 9.14536C38.9905 9.20015 38.9628 9.28234 38.9905 9.36453C38.9905 9.36453 42.1421 20.2138 42.1698 20.3234C42.5845 21.6111 43.6074 22.2412 44.9067 22.2412C46.1508 22.296 47.2843 21.5015 47.6437 20.3234C47.699 20.1864 50.7677 9.36453 50.7677 9.36453C50.7954 9.28234 50.7677 9.20015 50.7124 9.14536C50.6571 9.09056 50.5742 9.03577 50.4912 9.03577H48.0031Z" fill="white"/>
+<path d="M33.6271 0.241211H7.16977C6.20215 0.241211 5.31748 0.761759 4.84749 1.55628C4.34986 2.3782 4.32222 3.3919 4.76455 4.21381L7.41858 9.20012H2.60816C1.99994 9.20012 1.41937 9.50148 1.08762 10.022C0.755866 10.5426 0.755866 11.2001 1.03233 11.7481L9.54733 27.6933C9.85144 28.2686 10.4597 28.6248 11.0955 28.6248C11.7314 28.6248 12.3396 28.2686 12.6437 27.6933L14.966 23.3645L17.8688 28.8166C18.3388 29.6933 19.2788 30.2412 20.274 30.2412C21.2693 30.2412 22.2093 29.6933 22.6792 28.8166L35.9494 4.07683C36.3917 3.25491 36.3641 2.26861 35.8664 1.50148C35.4241 0.706964 34.5394 0.241211 33.6271 0.241211ZM21.7946 10.6796L15.9889 21.4741C15.7954 21.8576 15.4083 22.0768 14.966 22.0768C14.5236 22.0768 14.1366 21.8303 13.9431 21.4741L8.22032 10.7892C8.05444 10.4604 8.05444 10.0768 8.24796 9.74806C8.44149 9.41929 8.80089 9.22751 9.16029 9.22751H20.8822C21.2416 9.22751 21.5734 9.3919 21.7393 9.69327C21.9604 9.99464 21.9604 10.3782 21.7946 10.6796Z" fill="white"/>
+</svg>

src/pages/Home.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import { Rodape } from "../components/Footer/Rodape/Rodape";
 import { Header } from "../components/Header/Header";
 
 
-export const Home = ()=>{
-    return(
+export const Home = () => {
+    return (
         <>
-         <Header/>
+            <Header />
+
+            <Rodape />
         </>
     )
 }