From d04939a51a9e6492e6da2332f06f557fcca78a70 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:09:19 -0300
Subject: [PATCH 01/37] Install use-onclickoutside hook

---
 package.json |  3 ++-
 yarn.lock    | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e62bd5d..d865070 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "postcss-import": "^12.0.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "tailwindcss": "^1.9.4"
+    "tailwindcss": "^1.9.4",
+    "use-onclickoutside": "^0.3.1"
   },
   "devDependencies": {
     "@jungsoft/eslint-config": "4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 48d0e71..e76ba1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1609,6 +1609,11 @@ aproba@^1.0.3, aproba@^1.1.1:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
+are-passive-events-supported@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/are-passive-events-supported/-/are-passive-events-supported-1.1.1.tgz#3db180a1753a2186a2de50a32cded3ac0979f5dc"
+  integrity sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==
+
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -6869,6 +6874,26 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.0.tgz#4db2111e0d53ca694187ea5fd5cb2ba610286fe0"
+  integrity sha512-kady5Z1O1qx5RitodCCKbpJSVEtECXYcnBnb5Q48Bz5V6gBmTu85ZcGdVwVFs8+DaOurNb/L5VdGHoQRMknghw==
+
+use-latest@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232"
+  integrity sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.0.0"
+
+use-onclickoutside@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.3.1.tgz#fdd723a6a499046b6bc761e4a03af432eee5917b"
+  integrity sha512-aahvbW5+G0XJfzj31FJeLsvc6qdKbzeTsQ8EtkHHq5qTg6bm/qkJeKLcgrpnYeHDDbd7uyhImLGdkbM9BRzOHQ==
+  dependencies:
+    are-passive-events-supported "^1.1.0"
+    use-latest "^1.0.0"
+
 use-subscription@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.0.tgz#0df66fdf97b9a340147ad72f76fac1db6f56d240"

From 5f08d200060c74e5ab9582f8727528450ed33640 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:09:50 -0300
Subject: [PATCH 02/37] Add header assets

---
 public/icons/navbarButton.png | Bin 0 -> 243 bytes
 public/images/logo.png        | Bin 0 -> 9099 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/icons/navbarButton.png
 create mode 100644 public/images/logo.png

diff --git a/public/icons/navbarButton.png b/public/icons/navbarButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..50e73f724529f5a49184ed0146ab6a920684d843
GIT binary patch
literal 243
zcmeAS@N?(olHy`uVBq!ia0vp^azJdv!3HF~<FelaDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAiu-Y#WAFU@$FSd-Ub66)(iZO3_{NsI3paG
z{3bX|Xku0|V11BKY+xnw=E555KjjhSKRh=(TQ_ucL|tDxMQo+;t4}*WDvP)8O42{h
z!Tj^+>MN3^cNLU$!-{L39b^2u{rY|*--y3{`W+tL;X;!l%Y)2b?Cc7<RN=p?>FTK-
l=fn>u5?_2&P+Ih?Hr=jFZO8kNV?Z}Cc)I$ztaD0e0sx;KRapQ4

literal 0
HcmV?d00001

diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..80d1860d0f38967a260025e51e8b773b80cdc2e3
GIT binary patch
literal 9099
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
JPDHLkV1oA9elY+5

literal 0
HcmV?d00001


From 0031d524264eab464172d34eb110998b2e587034 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:10:08 -0300
Subject: [PATCH 03/37] Remove app placeholder content

---
 pages/index.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index d46c745..b0e73d9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,13 +5,7 @@ const App: React.FC = () => (
     <Head>
       <title>Floripa+ | Torne a ilha em um lugar melhor</title>
     </Head>
-    <main className="h-screen w-screen flex justify-center items-center bg-background-light">
-      <h1 className="text-gray-900 text-3xl animate-pulse font-medium">
-        Work in progress
-        {" "}
-        <span aria-label="Work in progress emoji" role="img">👷‍♀️</span>
-      </h1>
-    </main>
+    <main id="page-wrapper" className="h-screen w-screen flex justify-center items-center bg-background-light" />
   </>
 );
 

From eb7f6125f9431e36d3aab514320641d6aa349eb4 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:10:33 -0300
Subject: [PATCH 04/37] Add base structure for Navbar

---
 components/Header/Navbar.tsx | 40 ++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 components/Header/Navbar.tsx

diff --git a/components/Header/Navbar.tsx b/components/Header/Navbar.tsx
new file mode 100644
index 0000000..ab86a92
--- /dev/null
+++ b/components/Header/Navbar.tsx
@@ -0,0 +1,40 @@
+import React, { useRef, useState } from "react";
+import Image from "next/image";
+import useOnClickOutside from "use-onclickoutside";
+
+const Navbar: React.FC = () => {
+  const [isNavbarOpen, setIsNavbarOpen] = useState(false);
+
+  const navElementRef = useRef(null);
+
+  const toggleNavbar = (): void => {
+    setIsNavbarOpen(prev => !prev);
+  };
+
+  useOnClickOutside(navElementRef, toggleNavbar);
+
+  return (
+    <>
+      <button
+        className="cursor-pointer bg-none border-none outline-none focus:outline-none"
+        type="button"
+        onClick={toggleNavbar}
+      >
+        <Image
+          src="/icons/navbarButton.png"
+          alt="Navbar Button"
+          width={30}
+          height={50}
+        />
+      </button>
+
+      {
+        isNavbarOpen && (
+          <nav ref={navElementRef} className="w-64 h-screen fixed bg-gray-900 top-0 right-0" />
+        )
+      }
+    </>
+  );
+};
+
+export default Navbar;

From 750f113139317a1fd965339d4b2d1bb71f26cec0 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:10:41 -0300
Subject: [PATCH 05/37] Add base structure for Header

---
 components/Header/index.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 components/Header/index.tsx

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
new file mode 100644
index 0000000..6d10016
--- /dev/null
+++ b/components/Header/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Image from "next/image";
+
+import Navbar from "./Navbar";
+
+const Header: React.FC = () => (
+  <header className="bg-black w-full flex items-center justify-between py-4 px-8 relative">
+    <div className="flex items-center w-full justify-between max-w-screen-lg mx-auto">
+      <Image
+        className="h-100"
+        loading="eager"
+        quality={100}
+        width={100}
+        height={100}
+        src="/images/logo.png"
+        alt="Floripa Mais Logo"
+      />
+
+      <Navbar />
+    </div>
+  </header>
+);
+
+export default Header;

From ec79406b7900035e79d7caad0bed2a59499167a2 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 15:10:50 -0300
Subject: [PATCH 06/37] Add header to app

---
 pages/_app.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 934bf38..f8145e4 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -5,6 +5,7 @@ import { AppProps } from "next/app";
 import "styles/main.css";
 
 import seoConfig from "config/seo";
+import Header from "components/Header";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => (
   <>
@@ -12,6 +13,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => (
       <meta name="viewport" content="width=device-width, initial-scale=1" />
     </Head>
     <DefaultSeo {...seoConfig} />
+    <Header />
     <Component {...pageProps} />
   </>
 );

From 12dfd919dceccf083e1b2d85818d4c7df7265887 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:35:23 -0300
Subject: [PATCH 07/37] Remove self-hosted fonts

---
 styles/main.css    | 17 -----------------
 tailwind.config.js |  7 ++-----
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/styles/main.css b/styles/main.css
index 09670af..a90f074 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -2,20 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: Montserrat-Medium;
-  font-weight: 300;
-  src: url(/static/fonts/Montserrat-Light) format("ttf");
-}
-
-@font-face {
-  font-family: Montserrat-Medium;
-  font-weight: 500;
-  src: url(/static/fonts/Montserrat-Medium) format("ttf");
-}
-
-@font-face {
-  font-family: Montserrat-SemiBold;
-  font-weight: 600;
-  src: url(/static/fonts/Montserrat-SemiBold) format("ttf");
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index ced6d4d..9318d19 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,3 @@
-const fallbackFonts = ["Arial", "sans-serif"];
-
 module.exports = {
   purge: [
     "./pages/*.{ts,tsx}",
@@ -8,15 +6,14 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        black: "#0d0c0f",
         "orange-100": "#FB8F0A",
         "orange-200": "#FC9414",
         "background-light": "#F2F2F2",
       },
     },
     fontFamily: {
-      semibold: ["Montserrat-SemiBold", ...fallbackFonts],
-      medium: ["Montserrat-Medium", ...fallbackFonts],
-      light: ["Montserrat-Light", ...fallbackFonts],
+      body: ["Montserrat", "Arial", "sans-serif"],
     },
   },
   variants: {},

From 63ced8df282963bdf53fb15825b45cb0c1fe8dc6 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:35:44 -0300
Subject: [PATCH 08/37] Install react-icons and react-with-breakpoints

---
 package.json |  2 ++
 yarn.lock    | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d865070..5d48a93 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
     "postcss-import": "^12.0.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-icons": "^3.11.0",
+    "react-with-breakpoints": "^4.0.4",
     "tailwindcss": "^1.9.4",
     "use-onclickoutside": "^0.3.1"
   },
diff --git a/yarn.lock b/yarn.lock
index e76ba1d..ec95d64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2106,7 +2106,7 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase@5.3.1:
+camelcase@5.3.1, camelcase@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@@ -5602,6 +5602,13 @@ react-dom@16.14.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-icons@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
+  integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@16.13.1, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -5612,6 +5619,11 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-with-breakpoints@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-with-breakpoints/-/react-with-breakpoints-4.0.4.tgz#3326a0b6982bd23b53d0005641fb9aef7dea83d7"
+  integrity sha512-u9t3d6W6feFoLaHWqYnw/I7GAyYqi38V/f7UFWCbKcKJ+CIERqIEUawVuhiYGLDD6ZE7kS1am0FFW0BJuNl9QQ==
+
 react@16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"

From 4ae255f91eb48e3df8f830e325300351076acfde Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:37:51 -0300
Subject: [PATCH 09/37] Add base header navbar links

---
 components/Header/constants.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 components/Header/constants.ts

diff --git a/components/Header/constants.ts b/components/Header/constants.ts
new file mode 100644
index 0000000..ee9217d
--- /dev/null
+++ b/components/Header/constants.ts
@@ -0,0 +1,20 @@
+/**
+ * Defines the links to be show on the header navbar
+ */
+export const headerNavbarLinks = [
+  {
+    label: "Eventos",
+  },
+  {
+    label: "Doações",
+  },
+  {
+    label: "Missão",
+  },
+  {
+    label: "Equipe",
+  },
+  {
+    label: "Contato",
+  },
+];

From 74f8116c8a21f0c6cff1db9e5ed0a44bca2ac4c2 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:38:08 -0300
Subject: [PATCH 10/37] Set font-body to body element

---
 pages/_document.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/_document.tsx b/pages/_document.tsx
index 0411126..03411d7 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -36,7 +36,7 @@ class MyDocument extends Document {
           <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png" />
           <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" />
         </Head>
-        <body>
+        <body className="font-body min-w-screen">
           <Main />
           <NextScript />
         </body>

From 4fe9c1360d19ef3bda0d51d462d6eef43e456e7e Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:39:11 -0300
Subject: [PATCH 11/37] Add tailwind breakpoints provider and root provider

---
 contexts/index.tsx                            | 11 +++++
 .../tailwindBreakpointsProvider/index.tsx     | 45 +++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 contexts/index.tsx
 create mode 100644 contexts/tailwindBreakpointsProvider/index.tsx

diff --git a/contexts/index.tsx b/contexts/index.tsx
new file mode 100644
index 0000000..e17ec82
--- /dev/null
+++ b/contexts/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import TailwindBreakpointsProvider from "./tailwindBreakpointsProvider";
+
+const ContextProviders: React.FC = ({ children }) => (
+  <TailwindBreakpointsProvider>
+    {children}
+  </TailwindBreakpointsProvider>
+);
+
+export default ContextProviders;
diff --git a/contexts/tailwindBreakpointsProvider/index.tsx b/contexts/tailwindBreakpointsProvider/index.tsx
new file mode 100644
index 0000000..ac3a518
--- /dev/null
+++ b/contexts/tailwindBreakpointsProvider/index.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import tailwindDefaultTheme from "tailwindcss/defaultTheme";
+import { BreakpointsProvider } from "react-with-breakpoints";
+
+export interface TailwindBreakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
+const parseTailwindBreakpointsToNumbers = (): TailwindBreakpoints => {
+  const parsedBreakpoints = Object.values(tailwindDefaultTheme.screens)
+    .map((screen: string) => {
+      const tailwindBreakpointUnit = "px";
+
+      return (
+        Number(screen.split(tailwindBreakpointUnit)[0])
+      );
+    });
+
+  return {
+    sm: parsedBreakpoints[0],
+    md: parsedBreakpoints[1],
+    lg: parsedBreakpoints[2],
+    xl: parsedBreakpoints[3],
+  };
+};
+
+const parsedTailwindBreakpoints = parseTailwindBreakpointsToNumbers();
+
+const providerBreakpoints = {
+  small: parsedTailwindBreakpoints.sm,
+  medium: parsedTailwindBreakpoints.md,
+  large: parsedTailwindBreakpoints.lg,
+  xlarge: parsedTailwindBreakpoints.xl,
+};
+
+const TailwindBreakpointsProvider: React.FC = ({ children }) => (
+  <BreakpointsProvider breakpoints={providerBreakpoints}>
+    {children}
+  </BreakpointsProvider>
+);
+
+export default TailwindBreakpointsProvider;

From 18d48687d99a43644928aef3436b808df5b5370a Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:39:23 -0300
Subject: [PATCH 12/37] Add font-family link and context provider to root app

---
 pages/_app.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index f8145e4..68ea1d3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,7 @@ import { AppProps } from "next/app";
 
 import "styles/main.css";
 
+import ContextProviders from "contexts";
 import seoConfig from "config/seo";
 import Header from "components/Header";
 
@@ -11,10 +12,13 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => (
   <>
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap" rel="stylesheet" />
     </Head>
     <DefaultSeo {...seoConfig} />
-    <Header />
-    <Component {...pageProps} />
+    <ContextProviders>
+      <Header />
+      <Component {...pageProps} />
+    </ContextProviders>
   </>
 );
 

From fa6e04ace737f6ebbe7ebbeeedfdf9bc188ecbb9 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:39:50 -0300
Subject: [PATCH 13/37] Show mobile navbar and desktop navbar

---
 components/Header/MobileNavbar.tsx | 67 ++++++++++++++++++++++++++++++
 components/Header/Navbar.tsx       | 40 ------------------
 components/Header/index.tsx        | 29 ++++++++++---
 3 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 components/Header/MobileNavbar.tsx
 delete mode 100644 components/Header/Navbar.tsx

diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
new file mode 100644
index 0000000..8e58247
--- /dev/null
+++ b/components/Header/MobileNavbar.tsx
@@ -0,0 +1,67 @@
+import React, { useRef, useState } from "react";
+import Image from "next/image";
+import useOnClickOutside from "use-onclickoutside";
+import { AiOutlineClose } from "react-icons/ai";
+
+import { headerNavbarLinks } from "./constants";
+
+const NavbarMobile: React.FC = () => {
+  const [isNavbarMobileOpen, setIsNavbarMobileOpen] = useState(false);
+
+  const navElementRef = useRef(null);
+
+  const toggleNavbarMobile = (): void => {
+    setIsNavbarMobileOpen(prev => !prev);
+  };
+
+  useOnClickOutside(navElementRef, toggleNavbarMobile);
+
+  return (
+    <>
+      <button
+        className="cursor-pointer bg-none border-none outline-none focus:outline-none"
+        type="button"
+        onClick={toggleNavbarMobile}
+      >
+        <Image
+          src="/icons/navbarButton.png"
+          alt="Navbar Button"
+          width={30}
+          height={50}
+          loading="eager"
+        />
+      </button>
+
+      {
+        isNavbarMobileOpen && (
+          <nav ref={navElementRef} className="flex flex-col w-64 p-5 h-screen fixed bg-gray-900 top-0 right-0">
+            <header className="w-full flex justify-end">
+              <button
+                type="button"
+                onClick={toggleNavbarMobile}
+                className="outline-none focus:outline-none"
+              >
+                <AiOutlineClose className="text-white text-2xl" color="#fff" />
+              </button>
+            </header>
+
+            <ul className="w-full flex flex-col">
+              {
+                headerNavbarLinks.map(link => (
+                  <li
+                    key={link.label}
+                    className="text-white uppercase font-semibold my-5 text-lg"
+                  >
+                    {link.label}
+                  </li>
+                ))
+              }
+            </ul>
+          </nav>
+        )
+      }
+    </>
+  );
+};
+
+export default NavbarMobile;
diff --git a/components/Header/Navbar.tsx b/components/Header/Navbar.tsx
deleted file mode 100644
index ab86a92..0000000
--- a/components/Header/Navbar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useRef, useState } from "react";
-import Image from "next/image";
-import useOnClickOutside from "use-onclickoutside";
-
-const Navbar: React.FC = () => {
-  const [isNavbarOpen, setIsNavbarOpen] = useState(false);
-
-  const navElementRef = useRef(null);
-
-  const toggleNavbar = (): void => {
-    setIsNavbarOpen(prev => !prev);
-  };
-
-  useOnClickOutside(navElementRef, toggleNavbar);
-
-  return (
-    <>
-      <button
-        className="cursor-pointer bg-none border-none outline-none focus:outline-none"
-        type="button"
-        onClick={toggleNavbar}
-      >
-        <Image
-          src="/icons/navbarButton.png"
-          alt="Navbar Button"
-          width={30}
-          height={50}
-        />
-      </button>
-
-      {
-        isNavbarOpen && (
-          <nav ref={navElementRef} className="w-64 h-screen fixed bg-gray-900 top-0 right-0" />
-        )
-      }
-    </>
-  );
-};
-
-export default Navbar;
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 6d10016..972dda8 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,22 +1,39 @@
 import React from "react";
 import Image from "next/image";
+import { HideAt, ShowAt } from "react-with-breakpoints";
 
-import Navbar from "./Navbar";
+import MobileNavbar from "./MobileNavbar";
+import { headerNavbarLinks } from "./constants";
 
 const Header: React.FC = () => (
-  <header className="bg-black w-full flex items-center justify-between py-4 px-8 relative">
+  <header className="bg-black w-screen flex items-center justify-between py-4 px-8 relative">
     <div className="flex items-center w-full justify-between max-w-screen-lg mx-auto">
       <Image
-        className="h-100"
+        className="md:h-20 h-10"
         loading="eager"
         quality={100}
-        width={100}
-        height={100}
+        title="Floripa+"
         src="/images/logo.png"
         alt="Floripa Mais Logo"
+        unsized
       />
 
-      <Navbar />
+      <HideAt breakpoint="small">
+        <ul className="flex items-center">
+          {headerNavbarLinks.map(link => (
+            <li
+              key={link.label}
+              className="text-white ml-5 font-semibold text-xl uppercase"
+            >
+              {link.label}
+            </li>
+          ))}
+        </ul>
+      </HideAt>
+
+      <ShowAt breakpoint="small">
+        <MobileNavbar />
+      </ShowAt>
     </div>
   </header>
 );

From 4966d7976d8a7b3c97169b6d3eea9d0932379faa Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:48:22 -0300
Subject: [PATCH 14/37] Increase desktop header link margin

---
 components/Header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 972dda8..acd82e9 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -23,7 +23,7 @@ const Header: React.FC = () => (
           {headerNavbarLinks.map(link => (
             <li
               key={link.label}
-              className="text-white ml-5 font-semibold text-xl uppercase"
+              className="text-white ml-8 font-semibold text-xl uppercase"
             >
               {link.label}
             </li>

From 0ac6f8b2808e5d3dd675913d5df8be5e21e9feaa Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:48:35 -0300
Subject: [PATCH 15/37] Add new header navbar link

---
 components/Header/constants.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/Header/constants.ts b/components/Header/constants.ts
index ee9217d..9031bf0 100644
--- a/components/Header/constants.ts
+++ b/components/Header/constants.ts
@@ -2,6 +2,9 @@
  * Defines the links to be show on the header navbar
  */
 export const headerNavbarLinks = [
+  {
+    label: "Ações",
+  },
   {
     label: "Eventos",
   },

From d70b02a3ac6d30a0aa353667e27f7314ae89cd8f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 19:59:47 -0300
Subject: [PATCH 16/37] Disable tailwind utilities purge

---
 tailwind.config.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 9318d19..8a7a79d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,4 @@
 module.exports = {
-  purge: [
-    "./pages/*.{ts,tsx}",
-    "./components/*.{ts,tsx}",
-  ],
   theme: {
     extend: {
       colors: {

From 0a7804415a56510d235cbe8bc9fe66718098e30c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 20:17:11 -0300
Subject: [PATCH 17/37] Update postcss config and enable tailwind utilites
 purge again

---
 postcss.config.js  | 10 +++++-----
 tailwind.config.js |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index d46f5d6..1e52772 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
-  plugins: [
-    "postcss-import",
-    "tailwindcss",
-    "autoprefixer",
-  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    "postcss-import": {},
+  },
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 8a7a79d..9318d19 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,8 @@
 module.exports = {
+  purge: [
+    "./pages/*.{ts,tsx}",
+    "./components/*.{ts,tsx}",
+  ],
   theme: {
     extend: {
       colors: {

From 016ef5fdb7f396b37b587c2e9317aad59ec8e029 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Tue, 3 Nov 2020 20:26:02 -0300
Subject: [PATCH 18/37] Update purge paths on tailwind config

---
 tailwind.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 9318d19..3466ea8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   purge: [
-    "./pages/*.{ts,tsx}",
-    "./components/*.{ts,tsx}",
+    "./pages/*.tsx",
+    "./components/*.ts",
   ],
   theme: {
     extend: {

From 12fb403a2ded87629c4404dc96baa344b56ba147 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 06:23:06 -0300
Subject: [PATCH 19/37] Add new color to tailwind theme

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index 3466ea8..94470f0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     extend: {
       colors: {
         black: "#0d0c0f",
+        "yellow-100": "#DDA158",
         "orange-100": "#FB8F0A",
         "orange-200": "#FC9414",
         "background-light": "#F2F2F2",

From 5ad272e21b7f8235926318750448430d6569afa8 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 06:23:25 -0300
Subject: [PATCH 20/37] Add links to sections on header navbars

---
 components/Header/MobileNavbar.tsx | 12 +++++++++---
 components/Header/constants.ts     |  8 +++++---
 components/Header/index.tsx        | 14 ++++++++++----
 package.json                       |  1 +
 yarn.lock                          | 13 +++++++++++++
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
index 8e58247..2344821 100644
--- a/components/Header/MobileNavbar.tsx
+++ b/components/Header/MobileNavbar.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import { Link } from "react-scroll";
 import Image from "next/image";
 import useOnClickOutside from "use-onclickoutside";
 import { AiOutlineClose } from "react-icons/ai";
@@ -48,12 +49,17 @@ const NavbarMobile: React.FC = () => {
             <ul className="w-full flex flex-col">
               {
                 headerNavbarLinks.map(link => (
-                  <li
+                  <Link
+                    to={link.sectionId}
+                    spy
                     key={link.label}
-                    className="text-white uppercase font-semibold my-5 text-lg"
+                    smooth
+                    duration={500}
+                    activeClass="text-yellow-100"
+                    className="text-white cursor-pointer hover:text-yellow-100 ml-8 font-semibold text-xl uppercase"
                   >
                     {link.label}
-                  </li>
+                  </Link>
                 ))
               }
             </ul>
diff --git a/components/Header/constants.ts b/components/Header/constants.ts
index 9031bf0..4a55689 100644
--- a/components/Header/constants.ts
+++ b/components/Header/constants.ts
@@ -4,20 +4,22 @@
 export const headerNavbarLinks = [
   {
     label: "Ações",
-  },
-  {
-    label: "Eventos",
+    sectionId: "actions-section",
   },
   {
     label: "Doações",
+    sectionId: "donations-section",
   },
   {
     label: "Missão",
+    sectionId: "mission-section",
   },
   {
     label: "Equipe",
+    sectionId: "team-section",
   },
   {
     label: "Contato",
+    sectionId: "contact-section",
   },
 ];
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index acd82e9..a27587d 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import Image from "next/image";
+import { Link as ScrollLink } from "react-scroll";
 import { HideAt, ShowAt } from "react-with-breakpoints";
 
 import MobileNavbar from "./MobileNavbar";
 import { headerNavbarLinks } from "./constants";
 
 const Header: React.FC = () => (
-  <header className="bg-black w-screen flex items-center justify-between py-4 px-8 relative">
+  <header className="bg-black w-screen fixed flex items-center justify-between py-4 px-8">
     <div className="flex items-center w-full justify-between max-w-screen-lg mx-auto">
       <Image
         className="md:h-20 h-10"
@@ -21,12 +22,17 @@ const Header: React.FC = () => (
       <HideAt breakpoint="small">
         <ul className="flex items-center">
           {headerNavbarLinks.map(link => (
-            <li
+            <ScrollLink
+              to={link.sectionId}
               key={link.label}
-              className="text-white ml-8 font-semibold text-xl uppercase"
+              spy
+              smooth
+              duration={500}
+              activeClass="text-yellow-100"
+              className="text-white cursor-pointer hover:text-yellow-100 ml-8 font-semibold text-xl uppercase"
             >
               {link.label}
-            </li>
+            </ScrollLink>
           ))}
         </ul>
       </HideAt>
diff --git a/package.json b/package.json
index 5d48a93..6ffe8c3 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-icons": "^3.11.0",
+    "react-scroll": "^1.8.1",
     "react-with-breakpoints": "^4.0.4",
     "tailwindcss": "^1.9.4",
     "use-onclickoutside": "^0.3.1"
diff --git a/yarn.lock b/yarn.lock
index ec95d64..f9717d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4382,6 +4382,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -5619,6 +5624,14 @@ react-refresh@0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
+react-scroll@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.8.1.tgz#eb4052265f1606cf60855c981ebcfed1bc3beff3"
+  integrity sha512-UAKmawFHn+c7x/DoXuHqOsQ5xwNk2Dxv7vP8Ft41K2hglPWkshcSos0tMTr8704UkFqImoUGzMTdN4vuZXoqbw==
+  dependencies:
+    lodash.throttle "^4.1.1"
+    prop-types "^15.7.2"
+
 react-with-breakpoints@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/react-with-breakpoints/-/react-with-breakpoints-4.0.4.tgz#3326a0b6982bd23b53d0005641fb9aef7dea83d7"

From dcad08fd292a4c7ab55bbc3d6976d1deb3916d87 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:43:32 -0300
Subject: [PATCH 21/37] Install clsx to concatenate classes

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 6ffe8c3..9db757a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "autoprefixer": "9.8.6",
+    "clsx": "^1.1.1",
     "next": "^10.0.0",
     "next-seo": "^4.13.0",
     "postcss-import": "^12.0.1",

From f946b659e766bbe08936248c8415e07e76ee61f2 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:43:46 -0300
Subject: [PATCH 22/37] Add variants to margin and border-width utilities

---
 tailwind.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 94470f0..763f365 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,10 @@ module.exports = {
     "./pages/*.tsx",
     "./components/*.ts",
   ],
+  variants: {
+    margin: ({ after }) => after(["last"]),
+    borderWidth: ({ after }) => after(["hover"]),
+  },
   theme: {
     extend: {
       colors: {
@@ -17,6 +21,5 @@ module.exports = {
       body: ["Montserrat", "Arial", "sans-serif"],
     },
   },
-  variants: {},
   plugins: [],
 };

From 8c817733894b095c75d6e0e5e3fa49f923da6d03 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:43:59 -0300
Subject: [PATCH 23/37] Update yarn.lock

---
 yarn.lock | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index f9717d0..9660261 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2260,6 +2260,11 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"

From 538c9a67c19eff91a51dd8e7b40b440c9de351f3 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:44:13 -0300
Subject: [PATCH 24/37] Add default texts for footer

---
 components/Footer/constants.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 components/Footer/constants.ts

diff --git a/components/Footer/constants.ts b/components/Footer/constants.ts
new file mode 100644
index 0000000..0e7bc07
--- /dev/null
+++ b/components/Footer/constants.ts
@@ -0,0 +1,14 @@
+import { SocialMedia } from "./types";
+
+export const footerSocialMedias: SocialMedia[] = [
+  {
+    href: "https://www.instagram.com/floripa.mais/",
+    label: "Instagram",
+  },
+  {
+    href: "https://www.linkedin.com/company/floripa-mais/",
+    label: "Linkedin",
+  },
+];
+
+export const orgEmail = "organizacaofloripamais@gmail.com";

From b37c1758d20ddbab1a0c670173caeea96bed805b Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:45:17 -0300
Subject: [PATCH 25/37] Add footer

---
 components/Footer/Content.tsx | 56 +++++++++++++++++++++++++++++++++++
 components/Footer/index.tsx   | 16 ++++++++++
 components/Footer/types.ts    | 15 ++++++++++
 pages/_app.tsx                |  2 ++
 styles/main.css               |  8 +++++
 5 files changed, 97 insertions(+)
 create mode 100644 components/Footer/Content.tsx
 create mode 100644 components/Footer/index.tsx
 create mode 100644 components/Footer/types.ts

diff --git a/components/Footer/Content.tsx b/components/Footer/Content.tsx
new file mode 100644
index 0000000..7e41ae7
--- /dev/null
+++ b/components/Footer/Content.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import clsx from "clsx";
+
+import { FooterContentProps, FooterContentItemProps } from "./types";
+
+const FooterContentItem: React.FC<FooterContentItemProps> = ({
+  title,
+  children,
+}) => (
+  <div className="flex flex-col items-start last:mt-5 md:last:mt-0">
+    <h3 className="mb-5 text-orange-100 text-3xl font-semibold">{title}</h3>
+
+    {children}
+  </div>
+);
+
+const subtitleClassName = "text-white";
+
+const FooterContent: React.FC<FooterContentProps> = ({
+  footerSocialMediasTitle,
+  footerContactTitle,
+  socialMedias,
+  email,
+}) => {
+  const mailTo = `mailto:${email}`;
+
+  const socialMediaLinkClasses = clsx([subtitleClassName, "footer-social-media-link"]);
+
+  return (
+    <footer className="flex flex-col md:flex-row justify-between items-start md:items-center w-screen bg-black py-10 px-5 md:py-16 md:px-32">
+      <FooterContentItem title={footerSocialMediasTitle}>
+        <ul className="w-full flex">
+          {
+            socialMedias.map(socialMedia => (
+              <a
+                key={socialMedia.href}
+                href={socialMedia.href}
+                className={socialMediaLinkClasses}
+              >
+                <span className="hover:border-b-2">
+                  {socialMedia.label}
+                </span>
+              </a>
+            ))
+          }
+        </ul>
+      </FooterContentItem>
+
+      <FooterContentItem title={footerContactTitle}>
+        <a href={mailTo} className={subtitleClassName}>{email}</a>
+      </FooterContentItem>
+    </footer>
+  );
+};
+
+export default FooterContent;
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
new file mode 100644
index 0000000..0772294
--- /dev/null
+++ b/components/Footer/index.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import Content from "./Content";
+import { footerSocialMedias, orgEmail } from "./constants";
+
+const Footer: React.FC = () => (
+  // TODO -> Fetch data from CMS and set the default value as the constants
+  <Content
+    footerSocialMediasTitle="Conecte-se"
+    footerContactTitle="Contato"
+    socialMedias={footerSocialMedias}
+    email={orgEmail}
+  />
+);
+
+export default Footer;
diff --git a/components/Footer/types.ts b/components/Footer/types.ts
new file mode 100644
index 0000000..724dd2a
--- /dev/null
+++ b/components/Footer/types.ts
@@ -0,0 +1,15 @@
+export interface SocialMedia {
+  href: string;
+  label: string;
+}
+
+export interface FooterContentProps {
+  footerSocialMediasTitle: string;
+  footerContactTitle: string;
+  socialMedias: SocialMedia[];
+  email: string;
+}
+
+export interface FooterContentItemProps {
+  title: string;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 68ea1d3..758529e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,6 +7,7 @@ import "styles/main.css";
 import ContextProviders from "contexts";
 import seoConfig from "config/seo";
 import Header from "components/Header";
+import Footer from "components/Footer";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => (
   <>
@@ -18,6 +19,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => (
     <ContextProviders>
       <Header />
       <Component {...pageProps} />
+      <Footer />
     </ContextProviders>
   </>
 );
diff --git a/styles/main.css b/styles/main.css
index a90f074..8afe1e0 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -2,3 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+.footer-social-media-link:not(:last-child)::after {
+  content: "-";
+  margin: 0 5px;
+}
+
+.footer-social-media-link:not(:last-child)::after:hover {
+  text-decoration: none;
+}

From ae8672c298c48726b4dad0e48a47ebca68ad853c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 07:45:37 -0300
Subject: [PATCH 26/37] Fix margin of mobile header navbar links

---
 components/Header/MobileNavbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
index 2344821..9dd9f02 100644
--- a/components/Header/MobileNavbar.tsx
+++ b/components/Header/MobileNavbar.tsx
@@ -56,7 +56,7 @@ const NavbarMobile: React.FC = () => {
                     smooth
                     duration={500}
                     activeClass="text-yellow-100"
-                    className="text-white cursor-pointer hover:text-yellow-100 ml-8 font-semibold text-xl uppercase"
+                    className="text-white cursor-pointer hover:text-yellow-100 mt-8 font-semibold text-xl uppercase"
                   >
                     {link.label}
                   </Link>

From d0949ae74ba9665102a8a7f0933b66b4099525ce Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 08:31:35 -0300
Subject: [PATCH 27/37] Rollback postcss changes

---
 postcss.config.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/postcss.config.js b/postcss.config.js
index 1e52772..d46f5d6 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-    "postcss-import": {},
-  },
+  plugins: [
+    "postcss-import",
+    "tailwindcss",
+    "autoprefixer",
+  ],
 };

From 2ba607e52c4beb67a703b054a0e065b73d7b800f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 08:54:00 -0300
Subject: [PATCH 28/37] Install framer-motion

---
 package.json |  1 +
 yarn.lock    | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9db757a..5ec5688 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "autoprefixer": "9.8.6",
     "clsx": "^1.1.1",
+    "framer-motion": "^2.9.4",
     "next": "^10.0.0",
     "next-seo": "^4.13.0",
     "postcss-import": "^12.0.1",
diff --git a/yarn.lock b/yarn.lock
index 9660261..4c0de3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1084,6 +1084,18 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@eslint/eslintrc@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"
@@ -3486,6 +3498,26 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-2.9.4.tgz#366656ae240776c923cbd4359815e5c1ed56084d"
+  integrity sha512-Bvgdwpu5UO6VnEEwenJEmnGeo9ILRRWh9f3iIX+71NiM5X60Qi6KlkBFGZc9DGbdIUAn0AYgaxVhTKL39OOYng==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    popmotion "9.0.0-rc.20"
+    style-value-types "^3.1.9"
+    tslib "^1.10.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a"
+  integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==
+  dependencies:
+    hey-listen "^1.0.5"
+
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
@@ -3730,6 +3762,11 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.5, hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5293,6 +5330,16 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popmotion@9.0.0-rc.20:
+  version "9.0.0-rc.20"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-rc.20.tgz#f3550042ae31957b5416793ae8723200951ad39d"
+  integrity sha512-f98sny03WuA+c8ckBjNNXotJD4G2utG/I3Q23NU69OEafrXtxxSukAaJBxzbtxwDvz3vtZK69pu9ojdkMoBNTg==
+  dependencies:
+    framesync "^4.1.0"
+    hey-listen "^1.0.8"
+    style-value-types "^3.1.9"
+    tslib "^1.10.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -6500,6 +6547,14 @@ style-loader@1.2.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"
 
+style-value-types@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc"
+  integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^1.10.0"
+
 styled-jsx@3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.3.1.tgz#d79f306c42c99cefbe8e76f35dad8100dc5c9ecc"
@@ -6748,7 +6803,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

From 71664d7fb8b0710bae4b275bc786d47e11fc705f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 09:00:47 -0300
Subject: [PATCH 29/37] Add presence animation to mobile navbar links

---
 components/Header/MobileNavbar.tsx | 100 ++++++++++++++++++-----------
 1 file changed, 64 insertions(+), 36 deletions(-)

diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
index 9dd9f02..d4d47dd 100644
--- a/components/Header/MobileNavbar.tsx
+++ b/components/Header/MobileNavbar.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import { Link } from "react-scroll";
 import Image from "next/image";
 import useOnClickOutside from "use-onclickoutside";
@@ -6,23 +7,41 @@ import { AiOutlineClose } from "react-icons/ai";
 
 import { headerNavbarLinks } from "./constants";
 
+const navbarMotionStyles = {
+  exit: {
+    left: "100%",
+    opacity: 0,
+  },
+  initial: {
+    right: 0,
+    opacity: 1,
+  },
+  animate: {
+    opacity: 1,
+  },
+};
+
 const NavbarMobile: React.FC = () => {
   const [isNavbarMobileOpen, setIsNavbarMobileOpen] = useState(false);
 
   const navElementRef = useRef(null);
 
-  const toggleNavbarMobile = (): void => {
-    setIsNavbarMobileOpen(prev => !prev);
+  const openNavbarMobile = (): void => {
+    setIsNavbarMobileOpen(true);
+  };
+
+  const closeNavbarMobile = (): void => {
+    setIsNavbarMobileOpen(false);
   };
 
-  useOnClickOutside(navElementRef, toggleNavbarMobile);
+  useOnClickOutside(navElementRef, closeNavbarMobile);
 
   return (
     <>
       <button
         className="cursor-pointer bg-none border-none outline-none focus:outline-none"
         type="button"
-        onClick={toggleNavbarMobile}
+        onClick={openNavbarMobile}
       >
         <Image
           src="/icons/navbarButton.png"
@@ -33,39 +52,48 @@ const NavbarMobile: React.FC = () => {
         />
       </button>
 
-      {
-        isNavbarMobileOpen && (
-          <nav ref={navElementRef} className="flex flex-col w-64 p-5 h-screen fixed bg-gray-900 top-0 right-0">
-            <header className="w-full flex justify-end">
-              <button
-                type="button"
-                onClick={toggleNavbarMobile}
-                className="outline-none focus:outline-none"
-              >
-                <AiOutlineClose className="text-white text-2xl" color="#fff" />
-              </button>
-            </header>
+      <AnimatePresence>
+        {
+          isNavbarMobileOpen && (
+            <motion.nav
+              key="navbar"
+              ref={navElementRef}
+              exit={navbarMotionStyles.exit}
+              initial={navbarMotionStyles.initial}
+              animate={navbarMotionStyles.animate}
+              className="flex flex-col w-64 p-5 h-screen fixed bg-gray-900 top-0 right-0"
+            >
+              <header className="w-full flex justify-end">
+                <button
+                  type="button"
+                  onClick={closeNavbarMobile}
+                  className="outline-none focus:outline-none"
+                >
+                  <AiOutlineClose className="text-white text-2xl" color="#fff" />
+                </button>
+              </header>
 
-            <ul className="w-full flex flex-col">
-              {
-                headerNavbarLinks.map(link => (
-                  <Link
-                    to={link.sectionId}
-                    spy
-                    key={link.label}
-                    smooth
-                    duration={500}
-                    activeClass="text-yellow-100"
-                    className="text-white cursor-pointer hover:text-yellow-100 mt-8 font-semibold text-xl uppercase"
-                  >
-                    {link.label}
-                  </Link>
-                ))
-              }
-            </ul>
-          </nav>
-        )
-      }
+              <ul className="w-full flex flex-col">
+                {
+                  headerNavbarLinks.map(link => (
+                    <Link
+                      to={link.sectionId}
+                      spy
+                      key={link.label}
+                      smooth
+                      duration={500}
+                      activeClass="text-yellow-100"
+                      className="text-white cursor-pointer hover:text-yellow-100 mt-8 font-semibold text-xl uppercase"
+                    >
+                      {link.label}
+                    </Link>
+                  ))
+                }
+              </ul>
+            </motion.nav>
+          )
+        }
+      </AnimatePresence>
     </>
   );
 };

From cbae8a3f3a3eef4fa430154630e4fe18a1ef11ea Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 10:34:46 -0300
Subject: [PATCH 30/37] Bump next to 10.0.1

---
 package.json |  2 +-
 yarn.lock    | 48 ++++++++++++++++++++++++------------------------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 5ec5688..975ce24 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "autoprefixer": "9.8.6",
     "clsx": "^1.1.1",
     "framer-motion": "^2.9.4",
-    "next": "^10.0.0",
+    "next": "^10.0.1",
     "next-seo": "^4.13.0",
     "postcss-import": "^12.0.1",
     "react": "16.14.0",
diff --git a/yarn.lock b/yarn.lock
index 4c0de3f..718b47f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1145,20 +1145,20 @@
   resolved "https://registry.npmjs.org/@jungsoft/eslint-config/-/eslint-config-4.0.1.tgz#a8d529f4763712de3d7105ba7ddf074d1ffba159"
   integrity sha512-3HWx3SKQdsGGssGR+TinypB1b6R4AB/SAki/9nWT4WlMP6nIzVKiwGZ5RjeeF8sW4VBFuTLZd83WzEzdzW8Kcg==
 
-"@next/env@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.0.tgz#eb0239062226a9c8b604d58d4a4204e26c22eb16"
-  integrity sha512-59+6BnOxPoMY64Qy2crDGHtvQgHwIL1SIkWeNiEud1V6ASs59SM9oDGN+Bo/EswII1nn+wQRpMvax0IIN2j+VQ==
+"@next/env@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-10.0.1.tgz#5f49329fcc4fe8948737aeb8108c9d7d75155f93"
+  integrity sha512-6dwx5YXKG88IR9Q1aai+pprF7WKcmtl0ShQy/iENj5yMWMzsQCem6hxe198u9j7z1IsWyGDXZPsaLEJEatOpeQ==
 
-"@next/polyfill-module@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.0.tgz#17f59cb7325a03f23b66b979fccc56d133411b0a"
-  integrity sha512-FLSwwWQaP/sXjlS7w4YFu+oottbo/bjoh+L+YED7dblsaRJT89ifV+h8zvLvh1hCL7FJUYVar4rehvj/VO5T9w==
+"@next/polyfill-module@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-10.0.1.tgz#483c8f8692d842800f6badb59f8de74b540580a9"
+  integrity sha512-Vf8HYy74jx8aQgv/ftFXQtD/udJY4/OXYiiBepqrxC0T3PPl4cns1cbrr5f15xjPELMfcqulxwMYEurioBmv+w==
 
-"@next/react-dev-overlay@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.0.tgz#ba1acc79bc9d874f1801a0b312e6a45de74bf425"
-  integrity sha512-HJ44TJXtaGfGxVtljPECZvqw+GctVvBr60Rsedo5A+wU2GIiycJ8n5yUSdc9UiYTnPuxfJFicJec6kgR6GSWKA==
+"@next/react-dev-overlay@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-10.0.1.tgz#38f99f78316e9e7fa61a95e1d883e90d6d1fa4d0"
+  integrity sha512-VYwwGBtV9hqpqYoVABvZEFHBt3oL6PMpiLrDmnHaOwsPDQ+kQsiWd1L8tsYvAC2dgu/x/a/TG0D81FGF77Tohw==
   dependencies:
     "@babel/code-frame" "7.10.4"
     ally.js "1.4.1"
@@ -1171,10 +1171,10 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
-"@next/react-refresh-utils@10.0.0":
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.0.tgz#45cdd1ad3b55ac442f8431cdc43ff53c3dc44d16"
-  integrity sha512-V1/oiDWb2C1Do0eZONsKX1aqGNkqCUqxUahIiCjwKFu9c3bps+Ygg4JjtaCd9oycv0KzYImUZnU+nqveFUjxUw==
+"@next/react-refresh-utils@10.0.1":
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-10.0.1.tgz#ea6f808a9a6242d2da85138edee5562f17c0243a"
+  integrity sha512-K3thGrgD0uic/x4PZh9oRK/+LWTsn6zmDSHoEXgdft1gtlOjQIVGz7yuPMvuEB9oXDl+giuvRbU+JRlhtSf/eQ==
 
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
@@ -4781,10 +4781,10 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/next/-/next-10.0.0.tgz#fbc82fa69f05bf82fb5c4e160151f38fb9615e99"
-  integrity sha512-hpJkikt6tqwj7DfD5Mizwc1kDsaaS73TQK6lJL+++Ht8QXIEs+KUqTZULgdMk80mDV2Zhzo9/JYMEranWwAFLA==
+next@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/next/-/next-10.0.1.tgz#e1366b41b8547dfc7e9a14d1f7dd8a8584dcf0b2"
+  integrity sha512-EFlcWe82CQc1QkeIhNogcdC25KBz4CBwjyzfRHhig+wp28GW1O2P/mX+2a7EG1wXg69GyW1JYXOkKk2/VjIwVg==
   dependencies:
     "@ampproject/toolbox-optimizer" "2.7.0-alpha.1"
     "@babel/code-frame" "7.10.4"
@@ -4805,10 +4805,10 @@ next@^10.0.0:
     "@babel/runtime" "7.11.2"
     "@babel/types" "7.11.5"
     "@hapi/accept" "5.0.1"
-    "@next/env" "10.0.0"
-    "@next/polyfill-module" "10.0.0"
-    "@next/react-dev-overlay" "10.0.0"
-    "@next/react-refresh-utils" "10.0.0"
+    "@next/env" "10.0.1"
+    "@next/polyfill-module" "10.0.1"
+    "@next/react-dev-overlay" "10.0.1"
+    "@next/react-refresh-utils" "10.0.1"
     ast-types "0.13.2"
     babel-plugin-transform-define "2.0.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"

From 9f43e5d795e34554e8b0b057d865aae4abcf382f Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 10:35:09 -0300
Subject: [PATCH 31/37] Extract taiwind breakpoints to separate file

---
 .../tailwindBreakpointsProvider/index.tsx     | 37 +------------------
 styles/tailwind.ts                            | 35 ++++++++++++++++++
 2 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 styles/tailwind.ts

diff --git a/contexts/tailwindBreakpointsProvider/index.tsx b/contexts/tailwindBreakpointsProvider/index.tsx
index ac3a518..4049f04 100644
--- a/contexts/tailwindBreakpointsProvider/index.tsx
+++ b/contexts/tailwindBreakpointsProvider/index.tsx
@@ -1,43 +1,10 @@
 import React from "react";
-import tailwindDefaultTheme from "tailwindcss/defaultTheme";
 import { BreakpointsProvider } from "react-with-breakpoints";
 
-export interface TailwindBreakpoints {
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-}
-
-const parseTailwindBreakpointsToNumbers = (): TailwindBreakpoints => {
-  const parsedBreakpoints = Object.values(tailwindDefaultTheme.screens)
-    .map((screen: string) => {
-      const tailwindBreakpointUnit = "px";
-
-      return (
-        Number(screen.split(tailwindBreakpointUnit)[0])
-      );
-    });
-
-  return {
-    sm: parsedBreakpoints[0],
-    md: parsedBreakpoints[1],
-    lg: parsedBreakpoints[2],
-    xl: parsedBreakpoints[3],
-  };
-};
-
-const parsedTailwindBreakpoints = parseTailwindBreakpointsToNumbers();
-
-const providerBreakpoints = {
-  small: parsedTailwindBreakpoints.sm,
-  medium: parsedTailwindBreakpoints.md,
-  large: parsedTailwindBreakpoints.lg,
-  xlarge: parsedTailwindBreakpoints.xl,
-};
+import { tailwindBreakpoints } from "styles/tailwind";
 
 const TailwindBreakpointsProvider: React.FC = ({ children }) => (
-  <BreakpointsProvider breakpoints={providerBreakpoints}>
+  <BreakpointsProvider breakpoints={tailwindBreakpoints}>
     {children}
   </BreakpointsProvider>
 );
diff --git a/styles/tailwind.ts b/styles/tailwind.ts
new file mode 100644
index 0000000..06db7e6
--- /dev/null
+++ b/styles/tailwind.ts
@@ -0,0 +1,35 @@
+import tailwindDefaultTheme from "tailwindcss/defaultTheme";
+
+export interface TailwindBreakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
+const parseTailwindBreakpointsToNumbers = (): TailwindBreakpoints => {
+  const parsedBreakpoints = Object.values(tailwindDefaultTheme.screens)
+    .map((screen: string) => {
+      const tailwindBreakpointUnit = "px";
+
+      return (
+        Number(screen.split(tailwindBreakpointUnit)[0])
+      );
+    });
+
+  return {
+    sm: parsedBreakpoints[0],
+    md: parsedBreakpoints[1],
+    lg: parsedBreakpoints[2],
+    xl: parsedBreakpoints[3],
+  };
+};
+
+const parsedTailwindBreakpoints = parseTailwindBreakpointsToNumbers();
+
+export const tailwindBreakpoints = {
+  small: parsedTailwindBreakpoints.sm,
+  medium: parsedTailwindBreakpoints.md,
+  large: parsedTailwindBreakpoints.lg,
+  xlarge: parsedTailwindBreakpoints.xl,
+};

From d3478c80e728e3f2c5e51408dd5115111d5f4ac9 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 10:35:38 -0300
Subject: [PATCH 32/37] Remove deprecated unsized prop from Image

---
 components/Header/index.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index a27587d..f4db92f 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -9,15 +9,16 @@ import { headerNavbarLinks } from "./constants";
 const Header: React.FC = () => (
   <header className="bg-black w-screen fixed flex items-center justify-between py-4 px-8">
     <div className="flex items-center w-full justify-between max-w-screen-lg mx-auto">
-      <Image
-        className="md:h-20 h-10"
-        loading="eager"
-        quality={100}
-        title="Floripa+"
-        src="/images/logo.png"
-        alt="Floripa Mais Logo"
-        unsized
-      />
+      <div className="md:h-20 md:w-20 w-10 h-10 relative">
+        <Image
+          quality={100}
+          title="Floripa+"
+          src="/images/logo.png"
+          alt="Floripa Mais Logo"
+          loading="eager"
+          layout="fill"
+        />
+      </div>
 
       <HideAt breakpoint="small">
         <ul className="flex items-center">

From 2621248684f5bb35db50433b4cd1c2a02bd59486 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 11:29:03 -0300
Subject: [PATCH 33/37] Break words on Footer and improve responsiveness

---
 components/Footer/Content.tsx      | 4 ++--
 components/Header/MobileNavbar.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Footer/Content.tsx b/components/Footer/Content.tsx
index 7e41ae7..0da6ad1 100644
--- a/components/Footer/Content.tsx
+++ b/components/Footer/Content.tsx
@@ -7,14 +7,14 @@ const FooterContentItem: React.FC<FooterContentItemProps> = ({
   title,
   children,
 }) => (
-  <div className="flex flex-col items-start last:mt-5 md:last:mt-0">
+  <div className="flex flex-col items-start last:mt-5 md:last:mt-0 max-w-full">
     <h3 className="mb-5 text-orange-100 text-3xl font-semibold">{title}</h3>
 
     {children}
   </div>
 );
 
-const subtitleClassName = "text-white";
+const subtitleClassName = "break-words text-white max-w-full";
 
 const FooterContent: React.FC<FooterContentProps> = ({
   footerSocialMediasTitle,
diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
index d4d47dd..33adb0f 100644
--- a/components/Header/MobileNavbar.tsx
+++ b/components/Header/MobileNavbar.tsx
@@ -39,7 +39,7 @@ const NavbarMobile: React.FC = () => {
   return (
     <>
       <button
-        className="cursor-pointer bg-none border-none outline-none focus:outline-none"
+        className="flex items-center cursor-pointer bg-none border-none outline-none focus:outline-none"
         type="button"
         onClick={openNavbarMobile}
       >

From f64012969963617e7bcd9f4d444134c07071a957 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 11:50:53 -0300
Subject: [PATCH 34/37] Fix mobile navbar animation

---
 components/Header/MobileNavbar.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/Header/MobileNavbar.tsx b/components/Header/MobileNavbar.tsx
index 33adb0f..b1af067 100644
--- a/components/Header/MobileNavbar.tsx
+++ b/components/Header/MobileNavbar.tsx
@@ -7,17 +7,20 @@ import { AiOutlineClose } from "react-icons/ai";
 
 import { headerNavbarLinks } from "./constants";
 
+const navbarInitialMotionStyle = {
+  top: 0,
+  right: 0,
+  opacity: 0,
+  left: "100%",
+};
+
 const navbarMotionStyles = {
-  exit: {
-    left: "100%",
-    opacity: 0,
-  },
-  initial: {
-    right: 0,
-    opacity: 1,
-  },
+  exit: navbarInitialMotionStyle,
+  initial: navbarInitialMotionStyle,
   animate: {
     opacity: 1,
+    right: 0,
+    left: "unset",
   },
 };
 
@@ -61,7 +64,7 @@ const NavbarMobile: React.FC = () => {
               exit={navbarMotionStyles.exit}
               initial={navbarMotionStyles.initial}
               animate={navbarMotionStyles.animate}
-              className="flex flex-col w-64 p-5 h-screen fixed bg-gray-900 top-0 right-0"
+              className="flex flex-col w-64 p-5 h-screen fixed bg-gray-900"
             >
               <header className="w-full flex justify-end">
                 <button

From 3f8f5a7fe6ea3f928b1ae94066c9da78dbb888ea Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 12:06:21 -0300
Subject: [PATCH 35/37] Fix JSX identation to be consistent across files

---
 components/Header/index.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index f4db92f..655942d 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -22,19 +22,21 @@ const Header: React.FC = () => (
 
       <HideAt breakpoint="small">
         <ul className="flex items-center">
-          {headerNavbarLinks.map(link => (
-            <ScrollLink
-              to={link.sectionId}
-              key={link.label}
-              spy
-              smooth
-              duration={500}
-              activeClass="text-yellow-100"
-              className="text-white cursor-pointer hover:text-yellow-100 ml-8 font-semibold text-xl uppercase"
-            >
-              {link.label}
-            </ScrollLink>
-          ))}
+          {
+            headerNavbarLinks.map(link => (
+              <ScrollLink
+                to={link.sectionId}
+                key={link.label}
+                spy
+                smooth
+                duration={500}
+                activeClass="text-yellow-100"
+                className="text-white cursor-pointer hover:text-yellow-100 ml-8 font-semibold text-xl uppercase"
+              >
+                {link.label}
+              </ScrollLink>
+            ))
+          }
         </ul>
       </HideAt>
 

From 3f1e435573920437f0dc9d857b1554d2e4f32452 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 12:07:35 -0300
Subject: [PATCH 36/37] Add todo comment related to refactor

---
 components/Header/constants.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/Header/constants.ts b/components/Header/constants.ts
index 4a55689..c2659c1 100644
--- a/components/Header/constants.ts
+++ b/components/Header/constants.ts
@@ -1,5 +1,7 @@
 /**
  * Defines the links to be show on the header navbar
+ *
+ * TODO -> Get the section ids from constants stored on the sections structure
  */
 export const headerNavbarLinks = [
   {

From 26bcd714426a0038f10179a2ad150c174d750011 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 4 Nov 2020 12:55:43 -0300
Subject: [PATCH 37/37] Fix tailwind purge config

---
 styles/main.css    |  3 +++
 tailwind.config.js | 13 +++++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/styles/main.css b/styles/main.css
index 8afe1e0..2d8204d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,8 @@
+/* purgecss start ignore */
 @tailwind base;
 @tailwind components;
+/* purgecss end ignore */
+
 @tailwind utilities;
 
 .footer-social-media-link:not(:last-child)::after {
diff --git a/tailwind.config.js b/tailwind.config.js
index 763f365..4f2b3c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,13 @@
+const purgeExtensions = "*.{js,ts,jsx,tsx}";
+
 module.exports = {
-  purge: [
-    "./pages/*.tsx",
-    "./components/*.ts",
-  ],
+  purge: {
+    layers: ["base", "components", "utilities"],
+    content: [
+      `./pages/**/${purgeExtensions}`,
+      `./components/**/${purgeExtensions}`,
+    ],
+  },
   variants: {
     margin: ({ after }) => after(["last"]),
     borderWidth: ({ after }) => after(["hover"]),