From a33c293a92b559487b2d2ef722e82977711b7a8e Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Mon, 4 Sep 2023 14:22:58 +0200
Subject: [PATCH] Slight tweaks to bring the page closer to the design

---
 src/components/Jumbotron/index.tsx   |  9 ++-------
 src/components/TextContent/index.tsx | 15 ++++++++++-----
 src/css/custom.css                   |  3 +--
 src/pages/manifesto.tsx              |  8 ++++++--
 tailwind.config.js                   |  8 ++++++++
 5 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/Jumbotron/index.tsx b/src/components/Jumbotron/index.tsx
index 9a24a6e1..3cced83c 100644
--- a/src/components/Jumbotron/index.tsx
+++ b/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>
   );
 }
diff --git a/src/components/TextContent/index.tsx b/src/components/TextContent/index.tsx
index d62129a3..81307c33 100644
--- a/src/components/TextContent/index.tsx
+++ b/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>
   );
diff --git a/src/css/custom.css b/src/css/custom.css
index 90ea71b3..de544393 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -31,8 +31,7 @@ body {
 }
 
 .navbar {
-  height: 96px;
-  padding: 0;
+  @apply h-24 p-0;
 }
 
 .navbar__inner {
diff --git a/src/pages/manifesto.tsx b/src/pages/manifesto.tsx
index 71b1496a..d1247175 100644
--- a/src/pages/manifesto.tsx
+++ b/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
diff --git a/tailwind.config.js b/tailwind.config.js
index 51467060..d5e25438 100644
--- a/tailwind.config.js
+++ b/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",