feat: surface Cyber Essentials certification on homepage hero and footer

src/components/footer/index.tsx

@@ -21,6 +21,11 @@ const Footer = () => (
           on <StyledAnchor href="https://sasapps.io">SAS Web Apps</StyledAnchor>
           .
         </StyledDesc>
+        <StyledDesc>
+          <StyledAnchor href="https://sasapps.io/cyber-essentials-certified/">
+            Cyber Essentials Certified
+          </StyledAnchor>
+        </StyledDesc>
       </div>
       <div className="col-md-3">
         <StyledHeading>Source Code</StyledHeading>

src/components/herosection/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { Link } from 'gatsby'
+import { FaShieldAlt } from 'react-icons/fa'
 
-import { Hero, HeroHeading, HeroDesc } from './style'
+import { Hero, HeroHeading, HeroDesc, HeroBadge } from './style'
 import { BottomSectionArrow, OutlineButton } from '../shared/styledComponents'
 import { Container } from '../shared'
 
@@ -19,9 +20,18 @@ const HeroSection: React.FC<HeroSectionProps> = ({
       <HeroHeading>{heading}</HeroHeading>
       <HeroDesc>{desc}</HeroDesc>
       {location.pathname === pathPrefix + '/' && (
-        <Link to="/contact/">
+        <>
-          <OutlineButton>Try Data Controller</OutlineButton>
+          <HeroBadge
-        </Link>
+            href="https://sasapps.io/cyber-essentials-certified/"
+            target="_blank"
+            rel="noopener"
+          >
+            <FaShieldAlt /> Cyber Essentials Certified
+          </HeroBadge>
+          <Link to="/contact/">
+            <OutlineButton>Try Data Controller</OutlineButton>
+          </Link>
+        </>
       )}
     </Container>
     <BottomSectionArrow />

src/components/herosection/style.tsx

@@ -17,3 +17,20 @@ export const HeroHeading = styled.h1`
 export const HeroDesc = styled.p`
   opacity: 0.8;
 `
+
+export const HeroBadge = styled.a`
+  display: block;
+  width: fit-content;
+  margin: 0.75rem 0 0;
+  padding: 0.375rem 1rem;
+  font-size: 0.75rem;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  border-radius: 0.25rem;
+  color: white;
+  text-decoration: none;
+  &:hover {
+    color: white;
+    border-color: white;
+    opacity: 0.9;
+  }
+`