feat(): html feito, estilizado toda parte inferior do footer, newsletter ainda não estilizada

package-lock.json

@@ -22,6 +22,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "formik": "^2.2.9",
         "node-sass": "^8.0.0",
         "sass": "^1.57.1",
         "scss": "^0.2.4"
@@ -8322,6 +8323,45 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -8810,6 +8850,21 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11950,6 +12005,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -15117,6 +15178,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -17045,6 +17112,12 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "dev": true
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -24375,6 +24448,35 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -24721,6 +24823,23 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -27000,6 +27119,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -29148,6 +29273,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -30602,6 +30733,12 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "dev": true
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",

package.json

@@ -41,6 +41,7 @@
     ]
   },
   "devDependencies": {
+    "formik": "^2.2.9",
     "node-sass": "^8.0.0",
     "sass": "^1.57.1",
     "scss": "^0.2.4"

src/components/footer/Footer.tsx

@@ -1,9 +1,95 @@
 import React from 'react';
+import { Formik, Form, Field } from 'formik';
+import styles from '../../styles/Footer.module.scss'
+import facebook from '../../assets/img/facebook.png'
+import instagram from '../../assets/img/instagram.png'
+import twitter from '../../assets/img/twitter.png'
+import youtube from '../../assets/img/youtube.png'
+import linkedin from '../../assets/img/linkedin.png'
+import mastercard from '../../assets/img/master.png'
+import visa from '../../assets/img/visa.png'
+import diners from '../../assets/img/diners.png'
+import elo from '../../assets/img/elo.png'
+import hiper from '../../assets/img/hiper.png'
+import paypal from '../../assets/img/paypal.png'
+import boleto from '../../assets/img/boleto.png'
+import vtexpci from '../../assets/img/vtex-pci.png'
+import vtex from '../../assets/img/vtex.png'
+import m3 from '../../assets/img/m3.png'
+
 
 const Footer = () => {
     return(
-        <div>Footer</div>
+        <footer>
+            <div className={styles['footer__newsletter']}>
+                <form>
+                    <label>
+                        Assine nossa Newsletter
+                    </label>
+                    <input type='email' placeholder='E-mail'/>
+                    <button>Enviar</button>
+                </form>
+            </div>
+            <section className={styles['footer__top']}>
+                <div className={styles['footer__infos']}>
+                    <div className={styles['footer__info-institucional']}>
+                        <p className={styles['footer__info-title']}>Institucional</p>
+                        <p className={styles['footer__info']}>Quem Somos</p>
+                        <p className={styles['footer__info']}>Política de Privacidade</p>
+                        <p className={styles['footer__info']}>Segurança</p>
+                        <a href='/' className={styles['footer__info']}>Seja um Revendedor</a>
+                    </div>
+                    <div className={styles['footer__info-duvidas']}>
+                        <p className={styles['footer__info-title']}>Dúvidas</p>
+                        <p className={styles['footer__info']}>Entrega</p>
+                        <p className={styles['footer__info']}>Pagamento</p>
+                        <p className={styles['footer__info']}>Troca e Devoluções</p>
+                        <a href='/' className={styles['footer__info']}>Dúvidas Frequentes</a>
+                    </div>
+                    <div className={styles['footer__info-fale-conosco']}>
+                        <p className={styles['footer__info-title']}>Fale Conosco</p>
+                        <p className={styles['footer__info']}>Atendimento ao Consumidor</p>
+                        <p className={styles['footer__info']}>(11) 4159 9504</p>
+                        <p className={styles['footer__info']}>Atendimento Online</p>
+                        <a href='/' className={styles['footer__info']}>(11) 99433-8825</a>
+
+                    </div>
+                </div>
+                <div className={styles['footer__redes']}>
+                    <div className={styles['footer__container-rede']}>
+                        <img src={facebook} alt='facebook'/>
+                        <img src={instagram} alt='instagram'/>
+                        <img src={twitter} alt='twitter'/>
+                        <img src={youtube} alt='youtube'/>
+                        <img src={linkedin} alt='linkedin'/>
+                    </div>
+                    <p>www.loremipsum.com</p>
+                </div>
+            </section>
+            <section className={styles['footer__bottom']}>
+                <p className={styles['footer__text-bottom']}>Lorem ipsum dolor sit amet, consectetur adipiscing
+                elit, sed do eiusmod tempor
+                </p>
+                <div className={styles['footer__container-bandeiras']}>
+                    <img src={mastercard} alt='bandeira mastercard'/>
+                    <img src={visa} alt='bandeira visa'/>
+                    <img src={diners} alt='bandeira american express'/>
+                    <img src={elo} alt='bandeira elo'/>
+                    <img src={hiper} alt='bandeira hipercard'/>
+                    <img src={paypal} alt='paypal'/>
+                    <img src={boleto} alt='boleto'/>
+                    <div className={styles['footer__line']}></div>
+                    <img src={vtexpci} alt='vtex-cerficado'/>
+                </div>
+                <div className={styles['footer__certificate']}>
+                    <p className={styles['footer__text-certificate']}>Powered by</p>
+                    <img src={vtex} alt='vtex-logo'/>
+                    <p>Developed by</p>
+                    <img src={m3} alt='m3-logo'/>
+                </div>
+            </section>
+        </footer>
     )
 }
 
-export default Footer
+export default Footer

src/styles/Footer.module.scss

@@ -1,3 +1,116 @@
-* {
-	padding: 0;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
+@import 'variables.scss';
+
+footer {
+	width: 100%;
+
+	.footer__newsletter{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-width: 1px 0px;
+		border-style: solid;
+		border-color: $black;
+	}
+
+	.footer__top{
+		display: flex;
+		justify-content: space-between;
+		padding: 50px 100px;
+
+		.footer__infos{
+			display: flex;
+			justify-content: space-between;
+			width: 55.23%;
+
+			.footer__info-title{
+				text-align: start;
+				margin-top: 0px;
+			}
+
+		}
+
+		.footer__info {
+			color: $black;
+		}
+
+		.footer__redes{
+			width: 16.80%;
+			.footer__container-rede{
+				display: flex;
+				width: 100%;
+
+				img {
+					width: 16.28%;
+				}
+
+				p {
+					font-family: 'Roboto', sans-serif;
+					font-style: normal;
+					font-weight: 400;
+					font-size: 14px;
+					line-height: 16px;
+				}
+			}
+		}
+	}
+
+	.footer__bottom{
+		display: flex;
+		align-items: center;
+		background-color: $black;
+		color: $white;
+		font-family: 'Roboto', sans-serif;
+		font-style: normal;
+		font-size: 20px;
+		line-height: 23px;
+		justify-content: space-between;
+		padding: 0px 100px;
+
+		.footer__text-bottom{
+			width: 18.28%;
+			height: 24px;
+			font-style: normal;
+			font-size: 10px;
+			line-height: 12px;
+			text-transform: capitalize;
+		}
+
+		.footer__container-bandeiras{
+			display: flex;
+			width: 31.14%;
+			justify-content: space-between;
+
+			.footer__line{
+				border-left: 1px solid $white;
+			}
+
+			img {
+				width: 10.12%;
+			}
+		}
+
+		.footer__certificate{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			width: 17.70%;
+			height: 16px;
+
+			p {
+				font-weight: 400;
+				font-size: 10px;
+				line-height: 12px;
+				text-transform: capitalize;
+			}
+
+			img {
+				width: 10%;
+			}
+		}
+
+	}
+
 }
+
+