feat: surface Cyber Essentials certification on homepage hero and footer

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>
-        </Link>
+        <>
+          <HeroBadge
+            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 />