Implement base layout

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 max-w-full">
+    <h3 className="mb-5 text-orange-100 text-3xl font-semibold">{title}</h3>
+
+    {children}
+  </div>
+);
+
+const subtitleClassName = "break-words text-white max-w-full";
+
+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;

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 = "[email protected]";

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;

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;
+}

components/Header/MobileNavbar.tsx

@@ -0,0 +1,104 @@
+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";
+import { AiOutlineClose } from "react-icons/ai";
+
+import { headerNavbarLinks } from "./constants";
+
+const navbarInitialMotionStyle = {
+  top: 0,
+  right: 0,
+  opacity: 0,
+  left: "100%",
+};
+
+const navbarMotionStyles = {
+  exit: navbarInitialMotionStyle,
+  initial: navbarInitialMotionStyle,
+  animate: {
+    opacity: 1,
+    right: 0,
+    left: "unset",
+  },
+};
+
+const NavbarMobile: React.FC = () => {
+  const [isNavbarMobileOpen, setIsNavbarMobileOpen] = useState(false);
+
+  const navElementRef = useRef(null);
+
+  const openNavbarMobile = (): void => {
+    setIsNavbarMobileOpen(true);
+  };
+
+  const closeNavbarMobile = (): void => {
+    setIsNavbarMobileOpen(false);
+  };
+
+  useOnClickOutside(navElementRef, closeNavbarMobile);
+
+  return (
+    <>
+      <button
+        className="flex items-center cursor-pointer bg-none border-none outline-none focus:outline-none"
+        type="button"
+        onClick={openNavbarMobile}
+      >
+        <Image
+          src="/icons/navbarButton.png"
+          alt="Navbar Button"
+          width={30}
+          height={50}
+          loading="eager"
+        />
+      </button>
+
+      <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"
+            >
+              <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>
+            </motion.nav>
+          )
+        }
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default NavbarMobile;

components/Header/constants.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 = [
+  {
+    label: "Ações",
+    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",
+  },
+];

components/Header/index.tsx

@@ -0,0 +1,50 @@
+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 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">
+      <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">
+          {
+            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>
+
+      <ShowAt breakpoint="small">
+        <MobileNavbar />
+      </ShowAt>
+    </div>
+  </header>
+);
+
+export default Header;

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;

contexts/tailwindBreakpointsProvider/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { BreakpointsProvider } from "react-with-breakpoints";
+
+import { tailwindBreakpoints } from "styles/tailwind";
+
+const TailwindBreakpointsProvider: React.FC = ({ children }) => (
+  <BreakpointsProvider breakpoints={tailwindBreakpoints}>
+    {children}
+  </BreakpointsProvider>
+);
+
+export default TailwindBreakpointsProvider;

package.json

@@ -12,12 +12,18 @@
   },
   "dependencies": {
     "autoprefixer": "9.8.6",
-    "next": "^10.0.0",
+    "clsx": "^1.1.1",
+    "framer-motion": "^2.9.4",
+    "next": "^10.0.1",
     "next-seo": "^4.13.0",
     "postcss-import": "^12.0.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "tailwindcss": "^1.9.4"
+    "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"
   },
   "devDependencies": {
     "@jungsoft/eslint-config": "4.0.1",

pages/_app.tsx

@@ -4,15 +4,23 @@ import { AppProps } from "next/app";
 
 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 }) => (
   <>
     <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} />
-    <Component {...pageProps} />
+    <ContextProviders>
+      <Header />
+      <Component {...pageProps} />
+      <Footer />
+    </ContextProviders>
   </>
 );
 

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>

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" />
   </>
 );