Slight tweaks to bring the page closer to the design

src/components/Jumbotron/index.tsx

@@ -7,14 +7,9 @@ type JumbotronProps = {
 
 export default function Jumbotron({ children }: JumbotronProps) {
   return (
-    <div className="pt-20 pb-24 flex items-center justify-center">
+    <div className="pt-12 pb-20 flex items-center justify-center">
       <PatternBg />
-      {typeof children === "string" && (
-        <h1 className="text-7xl font-bold text-white text-center leading-snug">
-          {children}
-        </h1>
-      )}
-      {typeof children !== "string" && children}
+      {children}
     </div>
   );
 }

src/components/TextContent/index.tsx

@@ -1,16 +1,21 @@
 import React from "react";
+import clsx from "clsx";
 
 type TextContentProps = {
   children: React.ReactNode;
+  className?: string;
 };
 
-export default function TextContent({ children }: TextContentProps) {
+export default function TextContent({ children, className }: TextContentProps) {
   return (
     <div className="bg-white flex-1">
-      <div className="container my-14">
-        <div className="prose lg:prose-xl mx-auto prose-h3:text-4xl prose-h3:leading-normal">
-          {children}
-        </div>
+      <div
+        className={clsx(
+          "prose lg:prose-xl mx-auto prose-h3:text-5xl prose-h3:leading-normal prose-li:marker:text-inherit prose-a:text-gray-600 my-14 text-gray-600",
+          className
+        )}
+      >
+        {children}
       </div>
     </div>
   );

src/css/custom.css

@@ -31,8 +31,7 @@ body {
 }
 
 .navbar {
-  height: 96px;
-  padding: 0;
+  @apply h-24 p-0;
 }
 
 .navbar__inner {

src/pages/manifesto.tsx

@@ -6,8 +6,12 @@ import TextContent from "../components/TextContent";
 export default function Manifesto() {
   return (
     <Layout wrapperClassName="light">
-      <Jumbotron>The OpenTF Manifesto</Jumbotron>
-      <TextContent>
+      <Jumbotron>
+        <h1 className="text-7xl font-bold text-white text-center leading-snug max-w-2xl">
+          The OpenTF Manifesto
+        </h1>
+      </Jumbotron>
+      <TextContent className="max-w-2xl">
         <p>
           Terraform was open-sourced in 2014 under the Mozilla Public License
           (v2.0) (the “MPL”). Over the next ~9 years, it built up a community

tailwind.config.js

@@ -4,12 +4,20 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        fontSize: {
+          "5xl": "2.5rem",
+        },
         primary: {
           base: "#933EFF",
           hover: "#7732D0",
         },
         gray: {
+          900: "#1B1D20",
           700: "#505661",
+          600: "#6A7382",
+          150: "#DADEE3",
+          100: "#E7E9EC",
+          50: "#F9F9F9",
         },
         brand: "#933EFF",
         brandMuted: "#AA4EE7",