Staging

.gitignore

@@ -43,3 +43,6 @@ yarn-error.log*
 
 # jetbrains
 .idea/
+
+# storybook
+storybook-static/

.storybook/main.js

@@ -1,7 +1,8 @@
 module.exports = {
   "stories": [
     "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    '../components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
   "addons": [
     "@storybook/addon-links",

.storybook/preview.js

@@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons'
+
+library.add(fab, fas, far);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -7,4 +13,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+}

README.md

@@ -35,8 +35,6 @@ our continuous deployment needs.
 First, run the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
 ```
 
@@ -55,4 +53,15 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Vercel
+
+We use the [Vercel Platform](https://vercel.com?utm_source=model-un&utm_campaign=oss) from the creators of Next.js for
+our continuous deployment needs.
+
+<p align="center">
+  <a href="https://vercel.com?utm_source=model-un&utm_campaign=oss" target="blank">
+    <img src="public/Vercel/banner/vercel-banner.svg" width="200" alt="Vercel Banner" />
+  </a>
+</p>

components/footer/Footer.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import Footer from '../footer';
+
+export default {
+  title: 'Layout/Footer',
+  component: Footer,
+} as Meta;
+
+const Template: Story = (args) => <Footer {...args} />;
+
+export const base = Template.bind({});

components/footer/Footer.styles.ts

@@ -0,0 +1,65 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import styled from 'styled-components'
+import { colors } from '../../styles/colors';
+
+export const StyledFooter = styled.footer`
+  background-color: ${colors.primaryBlue};
+  border-top: 1px solid #EAEAEA;
+  color: white;
+  font-size: 18px;
+  padding-bottom: 120px;
+  padding-top: 48px;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+`;
+
+export const FooterNav = styled.nav`
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  max-width: 1200px;
+  width: 90%;
+`;
+
+export const FooterSection = styled.div`
+  align-items: start;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const FooterCol = styled.section`
+  display: flex;
+  flex-direction: column;
+  margin-right: 2rem;
+  width: 14rem;
+`;
+
+export const FooterColFirst = styled(FooterCol)`
+  width: 18rem;
+  padding-bottom: 25px;
+`
+
+export const VercelLink = styled.a`
+  align-self: center;
+  align-items: center;
+  width: 14rem;
+`;
+
+export const LogoBox = styled.span`
+  height: 1rem;
+  margin-left: 0.5rem;
+  flex-grow: 2;
+`;
+
+export const Icon = styled(FontAwesomeIcon)`
+  font-size: 2em;
+  height: 1em;
+  margin-left: 0.5rem;
+`
+export const FootH2 = styled.h2`
+  margin-top:0;
+`;

components/footer/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import Image from 'next/image';
+import {
+  FooterSection, StyledFooter, VercelLink, LogoBox,
+  FooterNav, FooterCol, FooterColFirst, Icon, FootH2,
+} from './Footer.styles';
+
+const Footer: React.FC = () => (
+  <StyledFooter>
+    <FooterNav>
+      <FooterSection>
+        <FooterColFirst>
+          <div>
+            <Image
+              src='/cimun_footer.png'
+              layout='responsive'
+              width={105}
+              height={30}
+            />
+          </div>
+          <p>
+            It's your world... <strong>fix it!</strong>
+          </p>
+        </FooterColFirst>
+        <FooterCol>
+          <FootH2>Explore</FootH2>
+          <div >
+            <a href="https://www.cimunmerch.org">The CIMUN Store</a>
+          </div>
+
+          <div >
+            <a
+              href="https://www.mimun.mx/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Check out MIMUN
+            </a>
+          </div>
+          <br/>
+        </FooterCol>
+
+        <FooterCol>
+          <FootH2>Connect with Us</FootH2>
+          <div >
+            <a href="https://www.facebook.com/CIMUNMUNDO"
+               target="_blank"
+               rel="noreferrer">
+              <Icon icon={['fab', 'facebook-f']} />
+            </a>
+            <a href="https://www.instagram.com/cimun_mundo/"
+               target="_blank"
+               rel="noreferrer">
+              <Icon icon={['fab', 'instagram']} />
+            </a>
+            <a href="https://twitter.com/CIMUN_MUNDO" target="_blank" rel="noreferrer">
+              <Icon icon={['fab', 'twitter']} />
+            </a>
+          </div>
+          <br />
+          <div >
+            <a href="mailto:sc@cimun.org">sc@cimun.org</a>
+          </div>
+          <br/>
+        </FooterCol>
+
+      </FooterSection>
+      <FooterSection>
+        <div/>
+        <VercelLink
+          href="https://vercel.com?utm_source=model-un&utm_campaign=oss"
+          target="_blank"
+          rel="noopener"
+        >
+          Powered by{'    '}
+          <LogoBox>
+            <Image
+              alt="Vercel Logo"
+              height={16}
+              src="/Vercel/logotype/light/vercel-logotype-light.svg"
+              width={72}
+            />
+          </LogoBox>
+        </VercelLink>
+        <div/>
+      </FooterSection>
+    </FooterNav>
+  </StyledFooter>
+);
+
+export default Footer;

components/headerNav/index.tsx

@@ -0,0 +1,80 @@
+import { ComponentWrapper } from '../../styles/containers'
+import { colors } from '../../styles/colors'
+import { breakpoints } from "../../styles/breakpoints";
+import Link from 'next/link'
+import styled from 'styled-components'
+
+const HeaderWrapper = styled(ComponentWrapper)`
+  height: 3.9375vw;
+  min-height: 45px;
+  max-height: 7vh;
+  width: 94vw;
+  margin: auto;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const ListContainer = styled.ul`
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+`;
+const ListItem = styled.li`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: ${colors.fadedPrimaryBlue};
+    cursor: pointer
+  }
+`;
+const Anchor = styled.a`
+  display: flex;
+  color: ${colors.primaryBlue};
+  text-align: center;
+  padding: 0 20px;
+  ${breakpoints("padding", "", [
+  { 1200: "0 16px" },
+  { 800: "0 14px" },
+  { 600: "0 12px" },
+  { 450: "0 10px" }
+])};
+  font-size: 1rem;
+  text-decoration: none;
+`;
+const Logo = styled.img`
+  height: 2.8125vw;
+  margin-top: 0.46875vw;
+  ${breakpoints("height", "px", [
+  { 1200: 35 },
+  { 800: 30 },
+])};
+  ${breakpoints("margin-top", "px", [
+  { 1200: 5 },
+  { 800: 7.5 },
+])};
+  object-fit: contain;
+
+  &:hover {
+    cursor: pointer
+  }
+  `;
+
+const HeaderNav = () => {
+  return (
+    <HeaderWrapper>
+      <div style={{ justifySelf: "flex-start", alignItems: "center", justifyContent: "center" }}><Link href="/"><Logo src="/cimun-logo.png" /></Link></div>
+      <ListContainer>
+        <ListItem><Link href="/"><Anchor>Home</Anchor></Link></ListItem>
+      </ListContainer>
+    </HeaderWrapper>
+  )
+}
+
+export default HeaderNav;