Merge pull request 'Move Cyber Essentials badge to who-is section + about page' (#12) from fix/cert-badge-placement into main

Reviewed-on: #12

src/components/footer/index.tsx

@@ -21,11 +21,6 @@ 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,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 + '/' && (
-        <>
+        <Link to="/contact/">
-          <HeroBadge
+          <OutlineButton>Try Data Controller</OutlineButton>
-            href="https://sasapps.io/cyber-essentials-certified/"
+        </Link>
-            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,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;
-  }
-`

src/components/shared/certBadge.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { FaShieldAlt } from 'react-icons/fa'
+import styled from 'styled-components'
+
+const StyledCertBadge = styled.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 1rem;
+  font-size: 0.75rem;
+  border: 2px solid #314351;
+  border-radius: 0.25rem;
+  color: #314351;
+  text-decoration: none;
+  &:hover {
+    color: white;
+    background-color: #314351;
+  }
+`
+
+const CertBadge = () => (
+  <StyledCertBadge
+    href="https://sasapps.io/cyber-essentials-certified/"
+    target="_blank"
+    rel="noopener"
+  >
+    <FaShieldAlt /> Cyber Essentials Certified
+  </StyledCertBadge>
+)
+
+export default CertBadge

src/pages/about.tsx

@@ -5,6 +5,7 @@ import Layout from '../components/layout'
 import Seo from '../components/seo'
 
 import { Section } from '../components/shared'
+import CertBadge from '../components/shared/certBadge'
 import {
   SectionHeading,
   SectionDesc
@@ -37,6 +38,7 @@ const About: React.FC<PageProps<unknown>> = ({ location }) => {
               </a>
               .
             </SectionDesc>
+            <CertBadge />
           </div>
         </div>
       </Section>

src/pages/index.tsx

@@ -7,6 +7,7 @@ import Layout from '../components/layout'
 import Seo from '../components/seo'
 
 import { Section, ScheduleDemo } from '../components/shared'
+import CertBadge from '../components/shared/certBadge'
 import {
   SectionHeading,
   SectionDesc
@@ -98,6 +99,7 @@ const Home: React.FC<PageProps<IndexPageData>> = ({ data, location }) => {
               perform manual data uploads into their preferred database, in
               real-time, with full validation, approval, security, and control.
             </SectionDesc>
+            <CertBadge />
           </div>
           <div className="col-md-3">
             <Art src={rightArt} info="Clinical Research Data" />