diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 6bfb4a4..49e3879 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -21,6 +21,11 @@ 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 0bef502..f484b8a 100644 --- a/src/components/herosection/index.tsx +++ b/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 = ({ {heading} {desc} {location.pathname === pathPrefix + '/' && ( - - Try Data Controller - + <> + + Cyber Essentials Certified + + + Try Data Controller + + )} diff --git a/src/components/herosection/style.tsx b/src/components/herosection/style.tsx index df0a063..ac9e64f 100644 --- a/src/components/herosection/style.tsx +++ b/src/components/herosection/style.tsx @@ -17,3 +17,20 @@ 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; + } +`