Main partner (#358)

* Changed class to className in Footer component

* Added main partner to partners page

* Added main partner to home page and nav

* Main partner pages cleanup

* removed navbar promo and banner styling

---------

Co-authored-by: Job Vonk <sticcpistt@icloud.com>

Author: Jelte-Akker

package-lock.json

@@ -72,7 +72,7 @@ export const BannerWrapper = styled.div`
     justify-content: center;
     align-items: center;
     height: 10rem;
-    width: 100%;
+    width: 95%;
   }
   .card {
     flex-grow: 1;

src/components/Banner.jsx

@@ -13,7 +13,7 @@ const Footer = () => (
       <div className="ui centered container inverted divided three column grid">
         <div className="aligned column grid">
           <a href="/">
-            <div class="ui mini image">
+            <div className="ui mini image">
               <img
                 src="https://public.svsticky.nl/logos/hoofd_outline_wit.svg"
                 alt="Home"
@@ -29,13 +29,13 @@ const Footer = () => (
         </div>
         <div className="aligned column">
           <a href="https://svsticky.nl/facebook">
-            <i class="big facebook icon"></i>
+            <i className="big facebook icon"></i>
           </a>
           <a href="https://www.linkedin.com/company/studievereniging-sticky">
-            <i class="big linkedin icon"></i>
+            <i className="big linkedin icon"></i>
           </a>
           <a href="https://github.com/svsticky/">
-            <i class="big github icon"></i>
+            <i className="big github icon"></i>
           </a>
         </div>
         <div className="aligned column grid">

src/components/layout/Footer.jsx

@@ -20,6 +20,15 @@ const IndexWrapper = styled.div`
   .activity {
     grid-area: activity;
   }
+  .mainPartner {
+    grid-area: mainPartner;
+  }
+
+  .banner {
+    display: grid;
+    grid-template-columns: 20% 80%;
+    grid-gap: 3em;
+  }
 
   @media ${device.mobileMax} {
     .container {
@@ -32,6 +41,7 @@ const IndexWrapper = styled.div`
         'news'
         'news'
         'drinks'
+        'mainPartner'
         'jobs'
         'activity';
       grid-gap: 2em;
@@ -55,7 +65,7 @@ const IndexWrapper = styled.div`
       grid-template-areas:
         'banner banner'
         'news news'
-        'drinks activity'
+        'drinks mainPartner'
         'jobs activity';
       grid-gap: 3em;
     }
@@ -71,9 +81,9 @@ const IndexWrapper = styled.div`
       grid-template-areas:
         'banner banner'
         'news drinks'
+        'news mainPartner'
         'news jobs'
-        'news activity'
-        'news ...';
+        'news activity';
       grid-gap: 3em;
     }
     .logo {

src/components/layout/GridDryQueries.jsx

@@ -5,7 +5,7 @@ import NavBar from './Navbar';
 import MobileNavbar from './MobileNavbar';
 import Footer from './Footer';
 import { Container } from 'semantic-ui-react';
-import { device } from '../../data/Devices';
+import { device } from '$/data/Devices';
 import { Helmet } from 'react-helmet';
 
 const layout = ({ children, title }) => (

src/components/layout/Layout.jsx

@@ -29,6 +29,9 @@ class NavBar extends React.Component {
     props.data.allContentfulPage.edges.sort(
       (a, b) => a.node.order - b.node.order // Sorting all the menu items
     );
+    this.mainPartner = props.data.allContentfulPartner.edges.filter(
+      edge => edge.node.isMainPartner
+    )[0].node;
   }
 
   changeLanguage = (lg, location) => {
@@ -149,6 +152,7 @@ class NavBar extends React.Component {
             >
               <img src={logo} alt="Sticky logo" />
             </Image>
+
             <div style={{ flex: 1 }} />
             {this.renderMenuItems(this.props.data.allContentfulPage.edges)}
             <Dropdown item text="Links" direction="left" key="links">
@@ -212,6 +216,9 @@ const NavBarWrapper = styled.div`
         height: 100%;
       }
     }
+    .hoofdsponsor-logo {
+      margin-left: 2em;
+    }
     .item {
       color: white !important;
       &:hover {
@@ -266,6 +273,20 @@ export default props => (
             }
           }
         }
+        allContentfulPartner {
+          edges {
+            node {
+              slug
+              node_locale
+              isMainPartner
+              logo {
+                file {
+                  url
+                }
+              }
+            }
+          }
+        }
         contentfulBoard(current: { eq: true }) {
           color
         }

src/components/layout/Navbar.jsx

@@ -0,0 +1,32 @@
+import { Link } from 'gatsby';
+import React from 'react';
+import { Card } from 'semantic-ui-react';
+import styled from 'styled-components';
+
+const Banner = ({ partner }) => (
+  <BannerWrapper>
+    <Card
+      fluid
+      className="mainPartnerBanner-card"
+      as={Link}
+      to={`/${partner.node_locale}/partners/${partner.slug}`}
+    >
+      <img src={partner.logo.file.url} />
+    </Card>
+  </BannerWrapper>
+);
+
+const BannerWrapper = styled.div`
+  img {
+    width: 100%;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .mainPartnerBanner-card {
+    height: 100%;
+  }
+`;
+
+export default Banner;

src/components/mainpartner/Banner.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card } from 'semantic-ui-react';
+import { Link } from 'gatsby';
+import { getTranslation, getLanguage, metadata } from '$/data/i18n';
+import { ImageContainer } from '$/helpers/ImageContainer';
+
+const MainPartnerCard = ({ partner }) => {
+  const language =
+    typeof window !== 'undefined'
+      ? getLanguage(window)
+      : metadata.defaultLocale;
+  return (
+    <div>
+      <h2>{getTranslation(language, 'partners.main')}</h2>
+      <Card
+        fluid
+        as={Link}
+        to={`/${partner.node_locale}/partners/${partner.slug}`}
+      >
+        <ImageContainer src={partner.logo.file.url} />
+      </Card>
+    </div>
+  );
+};
+export default MainPartnerCard;