diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 886219fe..2979fcff 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -1,15 +1,13 @@
-import { themes as prismThemes } from "prism-react-renderer";
-import type { Config } from "@docusaurus/types";
 import type * as Preset from "@docusaurus/preset-classic";
+import type { Config } from "@docusaurus/types";
 import MonacoEditorWebpackPlugin from "monaco-editor-webpack-plugin";
-
-const title = "GROQD";
-const tagline = "Typesafe GROQ Query Builder";
+import { themes as prismThemes } from "prism-react-renderer";
+import { metadata } from "./src/metadata";
 
 const config: Config = {
-  title,
-  tagline,
-  url: "https://commerce.nearform.com/",
+  title: metadata.longTitle,
+  tagline: metadata.description,
+  url: "https://nearform.com/",
   favicon: "img/nearform-icon.svg",
   baseUrl: process.env.VERCEL_ENV === "preview" ? "/" : "/open-source/groqd",
   onBrokenLinks: "throw",
@@ -83,11 +81,11 @@ const config: Config = {
     metadata: [
       {
         name: "title",
-        content: title,
+        content: metadata.longTitle,
       },
       {
         name: "description",
-        content: tagline,
+        content: metadata.description,
       },
       {
         name: "viewport",
@@ -103,11 +101,11 @@ const config: Config = {
       },
       {
         property: "og:title",
-        content: title,
+        content: metadata.longTitle,
       },
       {
         property: "og:description",
-        content: tagline,
+        content: metadata.description,
       },
       {
         property: "og:image",
@@ -120,11 +118,11 @@ const config: Config = {
       },
       {
         property: "twitter:title",
-        content: title,
+        content: metadata.longTitle,
       },
       {
         property: "twitter:description",
-        content: tagline,
+        content: metadata.description,
       },
       {
         property: "twitter:image",
diff --git a/website/src/components/landing/landing-features.tsx b/website/src/components/landing/landing-features.tsx
index a0be6075..96ce9af2 100644
--- a/website/src/components/landing/landing-features.tsx
+++ b/website/src/components/landing/landing-features.tsx
@@ -26,13 +26,13 @@ export const LandingFeatures = ({
           className="col-span-3 md:col-span-1 flex flex-col items-center text-center"
         >
           <img src={imgSrc} alt={alt} className="max-h-72" />
-          <span className="mt-8 text-2xl font-semibold">{title}</span>
-          <span
+          <div className="mt-8 text-2xl font-semibold">{title}</div>
+          <div
             dangerouslySetInnerHTML={html}
             className="mt-2 text-lg leading-8 mx-3"
           >
             {body}
-          </span>
+          </div>
         </li>
       ))}
     </ul>
diff --git a/website/src/components/landing/landing-hero.tsx b/website/src/components/landing/landing-hero.tsx
index 11ea6dd7..d0bd2ac0 100644
--- a/website/src/components/landing/landing-hero.tsx
+++ b/website/src/components/landing/landing-hero.tsx
@@ -5,11 +5,13 @@ export const LandingHero = ({
   body,
   copyText,
   heading,
+  subheading,
   navItems,
 }: {
   body: string;
   copyText: string;
   heading: string;
+  subheading: string;
   navItems: { link: string; title: string }[];
 }) => {
   const [buttonText, setButtonText] = useState("Copy");
@@ -29,6 +31,9 @@ export const LandingHero = ({
             <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
               {heading}
             </h1>
+            <p className="text-2xl font-bold tracking-tight sm:text-3xl">
+              {subheading}
+            </p>
             <p className="mt-6 text-lg leading-8">{body}</p>
             <div className="mt-10 flex flex-wrap flex-col xl:flex-row xl:items-center justify-start gap-6">
               <button
diff --git a/website/src/metadata.ts b/website/src/metadata.ts
new file mode 100644
index 00000000..ff0d6e6b
--- /dev/null
+++ b/website/src/metadata.ts
@@ -0,0 +1,11 @@
+export const metadata = {
+  title: "GROQD",
+  tagline: "A type-safe query builder for GROQ",
+  longTitle: "GROQD: a type-safe query builder for GROQ",
+  description:
+    "Designed to give the best GROQ developer experience possible, " +
+    "with the flexibility of GROQ, " +
+    "schema-aware auto-completion, " +
+    "strong type-checking, " +
+    "and the runtime safety of Zod.",
+};
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 4f694a1a..19b7f02f 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 
 import { LandingHero } from "../components/landing/landing-hero";
@@ -12,67 +11,70 @@ import {
   feature3,
 } from "../components/landing/landing-images";
 import { Divider } from "../components/landing/divider";
+import { metadata } from "../metadata";
 
 export default function Home(): JSX.Element {
-  const { siteConfig } = useDocusaurusContext();
   return (
-    <Layout title={siteConfig.title} description={siteConfig.tagline}>
-      <div className="dark:bg-gray-500 bg-gray-200 dark:text-white text-theme-2">
-        <LandingHero
-          heading={siteConfig.title}
-          body={siteConfig.tagline}
-          copyText="npm install groqd"
-          navItems={[
-            { link: "/open-source/groqd/docs", title: "Documentation" },
-            { link: "/open-source/groqd/arcade", title: "Demo" },
+    <Layout>
+      <main>
+        <div className="dark:bg-gray-500 bg-gray-200 dark:text-white text-theme-2">
+          <LandingHero
+            heading={metadata.title}
+            subheading={metadata.tagline}
+            body={metadata.description}
+            copyText="npm install groqd"
+            navItems={[
+              { link: "/open-source/groqd/docs", title: "Documentation" },
+              { link: "/open-source/groqd/arcade", title: "Demo" },
+              {
+                link: "https://github.com/FormidableLabs/groqd",
+                title: "Github",
+              },
+            ]}
+          ></LandingHero>
+        </div>
+        <LandingFeatures
+          heading="Features"
+          list={[
             {
-              link: "https://github.com/FormidableLabs/groqd",
-              title: "Github",
+              imgSrc: feature1,
+              alt: "Flexible",
+              title: "Flexible",
+              html: {
+                __html: "GROQD maintains the flexibility of GROQ.",
+              },
             },
-          ]}
-        ></LandingHero>
-      </div>
-      <LandingFeatures
-        heading="Features"
-        list={[
-          {
-            imgSrc: feature1,
-            alt: "Flexible",
-            title: "Flexible",
-            html: {
-              __html: "GROQD maintains the flexibility of GROQ.",
+            {
+              imgSrc: feature3,
+              alt: "Type Safe",
+              title: "Type Safe",
+              body: "Leverages the type safety of TypeScript.",
             },
-          },
-          {
-            imgSrc: feature2,
-            alt: "Runtime Safe",
-            title: "Runtime Safe",
-            html: {
-              __html:
-                "Automatically layers in the runtime safety of <a href='https://github.com/colinhacks/zod' target='_blank'>Zod</a>.",
+            {
+              imgSrc: feature2,
+              alt: "Runtime Safe",
+              title: "Runtime Safe",
+              html: {
+                __html:
+                  "Automatically layers in the runtime safety of <a href='https://github.com/colinhacks/zod' target='_blank'>Zod</a>.",
+              },
             },
-          },
-          {
-            imgSrc: feature3,
-            alt: "Type Safe",
-            title: "Type Safe",
-            body: "Leverages the type safety of TypeScript.",
-          },
-        ]}
-      />
-      <Divider />
-      <div className="flex gap-20 flex-col md:flex-row mx-16 lg:mx-32 xl:mx-64">
-        <LandingBanner
-          heading="Get Started"
-          body="Get the flexibility of GROQ with the runtime/type safety of Zod and TypeScript today!"
-          cta={{ link: "/open-source/groqd/docs", text: "Documentation" }}
-        />
-        <LandingBanner
-          heading="GROQD Arcade"
-          body="View sample queries, and play with live examples in the GROQD Arcade."
-          cta={{ link: "/open-source/groqd/arcade", text: "Arcade" }}
+          ]}
         />
-      </div>
+        <Divider />
+        <div className="flex gap-20 flex-col md:flex-row mx-16 lg:mx-32 xl:mx-64">
+          <LandingBanner
+            heading="Get Started"
+            body="Get the flexibility of GROQ with the runtime/type safety of Zod and TypeScript today!"
+            cta={{ link: "/open-source/groqd/docs", text: "Documentation" }}
+          />
+          <LandingBanner
+            heading="GROQD Arcade"
+            body="View sample queries, and play with live examples in the GROQD Arcade."
+            cta={{ link: "/open-source/groqd/arcade", text: "Arcade" }}
+          />
+        </div>
+      </main>
       <Divider />
       <LandingFeaturedProjects
         heading="Other Open Source"