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 SAS Web Apps
.
-
-
- Cyber Essentials Certified
-
-
Source Code
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
= ({
{heading}
{desc}
{location.pathname === pathPrefix + '/' && (
- <>
-
- Cyber Essentials Certified
-
-
- Try Data Controller
-
- >
+
+ Try Data Controller
+
)}
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 = () => (
+
+ Cyber Essentials Certified
+
+)
+
+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> = ({ location }) => {
.
+
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