From 674737f840ad8831f6c79520d4a32932fe77bab2 Mon Sep 17 00:00:00 2001
From: blog-dev <blog-dev@users.noreply.github.com>
Date: Fri, 11 Sep 2026 20:22:29 +0000
Subject: [PATCH] fix: move Cyber Essentials badge to who-is section + about
 page, drop hero/footer placements

---
 src/components/footer/index.tsx      |  5 -----
 src/components/herosection/index.tsx | 18 ++++------------
 src/components/herosection/style.tsx | 17 ---------------
 src/components/shared/certBadge.tsx  | 31 ++++++++++++++++++++++++++++
 src/pages/about.tsx                  |  2 ++
 src/pages/index.tsx                  |  2 ++
 6 files changed, 39 insertions(+), 36 deletions(-)
 create mode 100644 src/components/shared/certBadge.tsx

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index 49e3879..6bfb4a4 100644
--- a/src/components/footer/index.tsx
+++ b/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>
diff --git a/src/components/herosection/index.tsx b/src/components/herosection/index.tsx
index f484b8a..0bef502 100644
--- a/src/components/herosection/index.tsx
+++ b/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 />
diff --git a/src/components/herosection/style.tsx b/src/components/herosection/style.tsx
index ac9e64f..df0a063 100644
--- a/src/components/herosection/style.tsx
+++ b/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;
-  }
-`
diff --git a/src/components/shared/certBadge.tsx b/src/components/shared/certBadge.tsx
new file mode 100644
index 0000000..d29c9a6
--- /dev/null
+++ b/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
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 1e4720c..c9b71b0 100644
--- a/src/pages/about.tsx
+++ b/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>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e381794..3bd4e3b 100644
--- a/src/pages/index.tsx
+++ b/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" />