Merge pull request #1088 from gchq/chore/update-landing-page

Chore/update landing page

lib/landing/pages/index.tsx

@@ -17,7 +17,8 @@ import StarPurple500Icon from '@mui/icons-material/StarPurple500'
 import Slideshow from '../src/Slideshow'
 import React from 'react'
 
-import bailoLogo from '../public/bailo-logo.png'
+import bailoLogo from '../public/vertical-white.png'
+import { Bellota_Text } from '@next/font/google'
 
 const nunitoSansFont = localFont({
   src: '../public/fonts/NunitoSans-Black.ttf',
@@ -36,7 +37,7 @@ export default function Home() {
       <Box
         sx={{
           backgroundColor: '#f8e6dc',
-          background: 'linear-gradient(#3a545c, #473cff)',
+          background: 'linear-gradient(#54278e, #d62560)',
           backgroundSize: '400% 400%',
           minHeight: '100vh',
         }}
@@ -63,10 +64,7 @@ export default function Home() {
           spacing={1}
         >
           <Stack justifyContent='center' alignItems='center' spacing={1} sx={{ mb: 2 }}>
-            <Image loader={imageLoader} src={bailoLogo} alt='Logo' width={250} height={300} />
-            <Typography className={nunitoSansFont.className} variant='h1' sx={{ color: 'white' }}>
-              Bailo
-            </Typography>
+            <Image loader={imageLoader} src={bailoLogo} alt='Logo' width={250} height={350} />
             <Typography variant='h5' sx={{ color: 'white' }}>
               Making it easy to compliantly manage the machine learning lifecycle
             </Typography>
@@ -96,7 +94,7 @@ export default function Home() {
           borderLeft: '50px solid transparent',
           borderRight: '50px solid transparent',
           margin: 'auto',
-          borderTop: '50px solid #3d4e83',
+          borderTop: '50px solid #742783',
         }}
       />
       <Box sx={{ m: 'auto', my: 8 }} ref={ref}>

lib/landing/src/Slideshow.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components'
 import marketplaceImage from '../public/images/bailo-marketplace.png'
 import apiImage from '../public/images/bailo-api.png'
 import modelImage from '../public/images/bailo-model.png'
-import deploymentImage from '../public/images/bailo-deployment.png'
+import releasesImage from '../public/images/bailo-releases.png'
 
 const StyledSwiper = styled(Swiper)`
   border-radius: 1rem;
@@ -30,9 +30,9 @@ const slides = [
     alt: 'Bailo displays a configurable set of information for a model',
   },
   {
-    image: deploymentImage,
+    image: releasesImage,
     text: '',
-    alt: 'Bailo allows models to be deployed through Docker',
+    alt: 'Draft releases for models',
   },
   {
     image: apiImage,

lib/landing/src/Wrapper.tsx

@@ -115,30 +115,15 @@ export default function Wrapper({ title, page, children }: WrapperProps): ReactE
             }}
           >
             <Box sx={{ display: { xs: 'flex', cursor: 'pointer' } }}>
-              <Link href='/' passHref color='inherit' underline='none'>
-                <Image loader={imageLoader} src='/bailo-logo.png' alt='Logo' width={35} height={45} priority />
-              </Link>
-            </Box>
-            <Box
-              sx={{
-                flexGrow: 1,
-                ml: 2,
-                display: { xs: 'none', md: 'flex', cursor: 'pointer' },
-              }}
-            >
-              <Link
-                href='/'
-                passHref
-                color='inherit'
-                underline='none'
-                style={{
-                  color: 'inherit',
-                  textDecoration: 'inherit',
-                  fontSize: '1.25rem',
-                  fontWeight: 500,
-                }}
-              >
-                Bailo
+              <Link href='/' color='inherit' underline='none'>
+                <Image
+                  loader={imageLoader}
+                  src='/logo-horizontal-light.png'
+                  alt='Logo'
+                  width={142}
+                  height={60}
+                  priority
+                />
               </Link>
             </Box>
             Documentation

lib/landing/src/theme.ts

@@ -14,10 +14,10 @@ const theme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#27598e',
+      main: '#54278e',
     },
     secondary: {
-      main: '#f37f58',
+      main: '#d62560',
     },
     error: {
       main: red.A400,