SEO changes

next.config.ts

@@ -2,6 +2,19 @@ import type { NextConfig } from 'next';
 
 import redirects from './redirects.json';
 
+const cspHeader = [
+  `default-src 'self'`,
+  `script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
+  `style-src 'self' 'unsafe-inline'`,
+  `img-src 'self' blob: data:'`,
+  `font-src 'self'`,
+  `object-src 'none'`,
+  `base-uri 'self'`,
+  `form-action 'self'`,
+  `frame-ancestors 'none'`,
+  `upgrade-insecure-requests'`,
+].join('; ');
+
 const nextConfig: NextConfig = {
   reactStrictMode: true,
   poweredByHeader: false,
@@ -19,6 +32,15 @@ const nextConfig: NextConfig = {
   },
   async headers() {
     return [{
+      source: '/(.*)',
+      headers: [{
+        key: 'Content-Security-Policy',
+        value: cspHeader,
+      }, {
+        key: 'X-Content-Type-Options',
+        value: 'nosniff',
+      }],
+    }, {
       source: '/:path*',
       has: [{
         type: 'query',
@@ -30,7 +52,7 @@ const nextConfig: NextConfig = {
         value: 'SAMEORIGIN https://app.contentful.com',
       }, {
         key: 'Content-Security-Policy',
-        value: 'frame-ancestors \'self\' https://app.contentful.com',
+        value: [cspHeader, `frame-ancestors 'self' https://app.contentful.com`].join('; '),
       }],
     }];
   },

src/components/Hero/Hero.module.scss

@@ -84,23 +84,23 @@
 }
 
 .hero-container > h1 {
-  font-size: 28px;
-  line-height: 28px;
+  font-size: 60px;
+  line-height: 72px;
 
   @include variables.breakpoint('small') {
-    margin-bottom: 5px;
-    font-size: 20px;
-    line-height: 20px;
+    font-size: 32px;
+    line-height: 38px;
   }
 }
 
 .hero-container > h2 {
-  font-size: 60px;
-  line-height: 72px;
+  font-size: 28px;
+  line-height: 28px;
 
   @include variables.breakpoint('small') {
-    font-size: 32px;
-    line-height: 38px;
+    margin-bottom: 5px;
+    font-size: 20px;
+    line-height: 20px;
   }
 }
 

src/components/Hero/Hero.tsx

@@ -16,11 +16,22 @@ const Hero = ({
   background,
   plain = false,
   wide = false,
-}: Props) => (
-  <div className={`${styles.hero} ${!background && styles['hero-no-image']} ${plain && styles['hero-plain']}`}>
+}: Props) => {
+  const classes = [styles.hero];
+
+  if (!background) {
+    classes.push(styles['hero-no-image']);
+  }
+
+  if (plain) {
+    classes.push(styles['hero-plain']);
+  }
+
+  return (
+    <div className={classes.join(' ')}>
     <div className={`${styles['hero-container']} ${wide ? styles.wide : ''}`}>
-      <h1>{subtitle}</h1>
-      {title && <h2>{title}</h2>}
+      {subtitle && <h2>{subtitle}</h2>}
+      <h1>{title}</h1>
     </div>
     {background && (
       <Image
@@ -32,6 +43,7 @@ const Hero = ({
       />
     )}
   </div>
-);
+  );
+};
 
 export default Hero;