Adds page specific metadata to use case pages

website/layouts/use-cases/index.jsx

@@ -1,33 +1,42 @@
 import BasicHero from '../../components/basic-hero'
 import PrefooterCTA from '../../components/prefooter-cta'
 import ConsulEnterpriseComparison from '../../components/enterprise-comparison/consul'
+import Head from 'next/head'
+import HashiHead from '@hashicorp/react-head'
 
 export default function UseCaseLayout({ title, description, children }) {
   return (
-    <div id="p-use-case">
+    <>
-      <BasicHero
+      <HashiHead
-        heading={title}
+        is={Head}
-        content={description}
+        title={`Consul ${title}`}
-        brand="consul"
+        description={description}
-        links={[
-          {
-            text: 'Explore HashiCorp Learn',
-            url: 'https://learn.hashicorp.com/consul',
-            type: 'outbound',
-          },
-          {
-            text: 'Explore Documentation',
-            url: '/docs',
-            type: 'inbound',
-          },
-        ]}
       />
-      <div className="g-grid-container">
+      <div id="p-use-case">
-        <h2 className="g-type-display-2 features-header">Features</h2>
+        <BasicHero
+          heading={title}
+          content={description}
+          brand="consul"
+          links={[
+            {
+              text: 'Explore HashiCorp Learn',
+              url: 'https://learn.hashicorp.com/consul',
+              type: 'outbound',
+            },
+            {
+              text: 'Explore Documentation',
+              url: '/docs',
+              type: 'inbound',
+            },
+          ]}
+        />
+        <div className="g-grid-container">
+          <h2 className="g-type-display-2 features-header">Features</h2>
+        </div>
+        {children}
+        <ConsulEnterpriseComparison />
+        <PrefooterCTA />
       </div>
-      {children}
+    </>
-      <ConsulEnterpriseComparison />
-      <PrefooterCTA />
-    </div>
   )
 }