[ADD] PDF: placeholder for the retainer agreement & FR Call to action

Author: carms-ng

locales/en/translation.json

@@ -10,5 +10,6 @@
   "Introducing Coderbunker in the ": "Introducing Coderbunker in the ",
   "North": "North",
   "Go back to the homepage": "Go back to the homepage",
-  "Trusted by these partners and clients": "Trusted by these partners and clients"
+  "Trusted by these partners and clients": "Trusted by these partners and clients",
+  "Retain Us": "Retain Us"
 }

locales/fr/translation.json

@@ -11,5 +11,6 @@
   "Introducing Coderbunker in the ": "Présentation de Coderbunker dans le ",
   "North": "Nord",
   "We empower freelancer community to excel in long term projects.": "Nous permettons à la communauté des pigistes d'exceller dans les projets à long terme.",
-  "Trusted by these partners and clients": "Reconnu par ces partenaires et clients"
+  "Trusted by these partners and clients": "Reconnu par ces partenaires et clients",
+  "Retain Us": "Embauchez-nous"
 }

src/assets/pdfs/placeholder.pdf

@@ -1,29 +1,30 @@
 import * as React from "react";
 import styled from 'styled-components';
-import { Link, Trans } from 'gatsby-plugin-react-i18next';
+import { Trans } from 'gatsby-plugin-react-i18next';
+import PDF from '../assets/pdfs/placeholder.pdf';
 
+export default function CallToAction() {
+  return (
+    <ButtonStyle>
+      <a href={PDF} target="_blank" rel="noreferrer" className="px-4 md:px-6 py-2 text-lg md:text-xl">
+        <Trans>Retain Us</Trans>
+      </a>
+    </ButtonStyle>
+  )
+}
 const ButtonStyle = styled.div`
   transform: skew(-16deg);
   a {
+    white-space: nowrap;
     display: block;
-    padding: 8px 24px;
     background-color: var(--red);
     color: var(--white);
     transition: rotate 0.3s ease;
     letter-spacing: 1px;
     &:hover {
       cursor: pointer;
       transform: rotate(-8deg);
+      color: var(--white) !important;
     }
   }
-`
-
-export default function ButtonRed({href}) {
-  return (
-    <ButtonStyle>
-      <Link to={href} className="text-lg md:text-xl">
-        <Trans>Retain Us</Trans>
-      </Link>
-    </ButtonStyle>
-  )
-}
+`

src/components/button.js

@@ -5,8 +5,9 @@ import { graphql, useStaticQuery } from 'gatsby';
 import Img from 'gatsby-image';
 import styled from 'styled-components';
 
+
 import SiteBorderStyles from '../styles/SiteBorderStyles';
-import ButtonRed from "./button";
+import CallToAction from "./button";
 import { FiLinkedin, FiGithub } from 'react-icons/fi';
 import { SiAircanada } from 'react-icons/si'
 export default function Header() {
@@ -47,18 +48,19 @@ export default function Header() {
           <Link to="/">
             <Img
               fixed={data.file.childImageSharp.fixed}
+              style={{zIndex: `1`}}
               alt="Coderbunker Logo" />
           </Link>
 
 
           <ul className="flex items-center">
             {/* Language Switcher */}
-            <li className={`flex items-center px-2 md:px-4 ${isOn ? "switched-on" : "switched-off"}`}>
+            <li className={`flex items-center pr-2 md:px-4 ${isOn ? "switched-on" : "switched-off"}`}>
               <button onClick={toggleSwitcher} aria-label="Language Switcher" className="p-2 relative">
                 <SiAircanada className="text-2xl md:text-3xl"/>
               </button>
               {languages.map((lng) => (
-                <div key={lng} className={`text-lg md:text-xl p-2 ${isOn ? "block" : "hidden"}`}>
+                <div key={lng} className={`text-lg md:text-xl px-1 py-2 sm:p-2 ${isOn ? "block" : "hidden"}`}>
                   <Link to={originalPath} language={lng}>
                     {lng.toUpperCase()}
                   </Link>
@@ -67,7 +69,7 @@ export default function Header() {
             </li>
 
             <li>
-              <ButtonRed href="/page-2/" />
+              <CallToAction />
             </li>
           </ul>
         </div>
@@ -85,6 +87,7 @@ Header.defaultProps = {
 }
 
 const HeaderStyles = styled.header`
+  color: var(--darkgrey);
   border-bottom: 1px solid var(--lightgrey);
   padding: 1rem 0;
   position: fixed;
@@ -99,6 +102,9 @@ const HeaderStyles = styled.header`
       margin-left: auto;
     }
   }
+  a:hover, button:hover {
+    color: var(--black);
+  }
   .switched-on {
     background-color: var(--peach);
     color: black;