Use basehub in the hero (#211)

src/app/components/hero/index.tsx

@@ -10,23 +10,23 @@ import Link from 'next/link'
 import { RichText } from 'basehub/react-rich-text'
 
 export function Hero({ hero }: LandingPageFragment) {
+  const { h1, h2 } = hero.heroVariants.items[0]
+
   return (
     <section className="relative flex overflow-hidden">
       <div className="absolute -top-[30%] left-0 h-[130%] w-full animate-fadeIn lg:-left-[35%] lg:top-0 lg:h-full lg:w-[135%]">
         <Hyperspace className="opacity-10" />
       </div>
-      <div className="relative z-10 flex max-w-full flex-1 flex-col">
+      <div className=" relative z-10 flex max-w-full flex-1 flex-col">
         <Container className="relative z-10 flex w-full max-w-7xl flex-col pt-[120px] lg:pt-[180px] 2xl:pt-[260px]">
           <div className="flex flex-col lg:flex-row">
             <div className="flex-1">
-              <div className="max-w-3xl">
+              <div className="primary-emphasis max-w-3xl">
                 <h1 className="font-display text-4xl font-bold tracking-tight text-slate-900 sm:text-6xl xl:text-8xl">
-                  Move fast <span className="text-accent">without</span>
-                  <br />
-                  breaking things.
+                  <RichText>{h1!.json.content}</RichText>
                 </h1>
                 <div className="mt-6 max-w-[620px] rounded-lg bg-white/20 text-lg tracking-tight text-slate-700">
-                  <RichText>{hero.subtitle.json.content}</RichText>
+                  <RichText>{h2!.json.content}</RichText>
                 </div>
               </div>
 

src/lib/basehub-queries.ts

@@ -17,6 +17,12 @@ export const landingPageFragment = fragmentOn('LandingPage', {
     installationLink: linkFragment,
     contactUsLink: linkFragment,
     logosTitle: true,
+    heroVariants: {
+      items: {
+        h1: { json: { content: true } },
+        h2: { json: { content: true } }
+      }
+    },
     testimonials: {
       items: {
         testimonial: {

src/styles/tailwind.css

@@ -20,3 +20,8 @@
     --header-height: 76px;
   }
 }
+
+.primary-emphasis b {
+  color:  #f02d5e ;
+  font-weight: inherit;
+}