fix: move Cyber Essentials badge to who-is section + about page, drop hero/footer placements

src/components/herosection/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import { FaShieldAlt } from 'react-icons/fa'
 
-import { Hero, HeroHeading, HeroDesc, HeroBadge } from './style'
+import { Hero, HeroHeading, HeroDesc } from './style'
 import { BottomSectionArrow, OutlineButton } from '../shared/styledComponents'
 import { Container } from '../shared'
 
@@ -20,18 +19,9 @@ const HeroSection: React.FC<HeroSectionProps> = ({
       <HeroHeading>{heading}</HeroHeading>
       <HeroDesc>{desc}</HeroDesc>
       {location.pathname === pathPrefix + '/' && (
-        <>
-          <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>
-        </>
+        <Link to="/contact/">
+          <OutlineButton>Try Data Controller</OutlineButton>
+        </Link>
       )}
     </Container>
     <BottomSectionArrow />

src/components/herosection/style.tsx

@@ -17,20 +17,3 @@ 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;
-  }
-`