From 7cfab71423b2c2fcad443842b36c05a6c335effe Mon Sep 17 00:00:00 2001
From: daniellemaxwell <danielle@rotational.io>
Date: Mon, 24 Oct 2022 14:34:36 -0400
Subject: [PATCH 1/5] Header text corrections

---
 .../src/components/content/PageTitle.js                |  6 +++---
 .../src/components/layout/Navbar.js                    | 10 +++++-----
 web/ensign-landing-page/src/input.css                  |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/web/ensign-landing-page/src/components/content/PageTitle.js b/web/ensign-landing-page/src/components/content/PageTitle.js
index b6f4c835f..683fadb13 100644
--- a/web/ensign-landing-page/src/components/content/PageTitle.js
+++ b/web/ensign-landing-page/src/components/content/PageTitle.js
@@ -4,9 +4,9 @@ export default function PageTitle() {
     return (
         <section className="text-white text-left">
             <div className="container pl-3 pt-5 sm:pl-20">
-              <h1 className="pb-1 text-xl sm:text-3xl md:text-6xl xl:text-7xl">Ensign</h1>
-              <h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">Powering Realtime Experiences</h2>
-              <h2 className="font-light text-base sm:text-base md:text-2xl lg:text-4xl">&amp; Data-driven Apps</h2>
+              <h1 className="pb-1 text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
+              <h2 className="text-base md:text-2xl lg:text-3xl">Powering Realtime Experiences</h2>
+              <h2 className="text-base md:text-2xl lg:text-3xl lg:text-5xl">&amp; Data-driven Apps</h2>
             </div>
         </section>
     )
diff --git a/web/ensign-landing-page/src/components/layout/Navbar.js b/web/ensign-landing-page/src/components/layout/Navbar.js
index 237e12f3e..4029a68a6 100644
--- a/web/ensign-landing-page/src/components/layout/Navbar.js
+++ b/web/ensign-landing-page/src/components/layout/Navbar.js
@@ -14,11 +14,11 @@ export default function Navbar() {
           </a>
           <ul className="topnav" id="myTopnav">
             <li><a href="https://rotational.app">Ensign</a></li>
-            <li className="font-normal"><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
-            <li className="font-normal"><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
-            <li className="font-normal"><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
-            <li className="font-normal"><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
-            <li className="font-normal"><a href="https://rotational.io/contact/"  target="_blank" rel="noreferrer">Contact</a></li>
+            <li><a href="https://rotational.io/services/" target="_blank" rel="noreferrer">Services</a></li>
+            <li><a href="https://rotational.io/opensource/" target="_blank" rel="noreferrer">Open Source</a></li>
+            <li><a href="https://rotational.io/blog/" target="_blank" rel="noreferrer">Blog</a></li>
+            <li><a href="https://rotational.io/about/" target="_blank" rel="noreferrer">About</a></li>
+            <li><a href="https://rotational.io/contact/"  target="_blank" rel="noreferrer">Contact</a></li>
             <li><a href="#" className="icon" onClick={toggleResponsiveClass}>
                 <i className="fa fa-bars"></i>
             </a></li>
diff --git a/web/ensign-landing-page/src/input.css b/web/ensign-landing-page/src/input.css
index 3965e9a64..fb9f81962 100644
--- a/web/ensign-landing-page/src/input.css
+++ b/web/ensign-landing-page/src/input.css
@@ -9,7 +9,7 @@
 
 @layer base {
   h1 {
-    @apply text-6xl;
+    @apply font-bold
   }
   h2 {
     @apply text-4xl;
@@ -20,7 +20,7 @@
     @apply font-bold;
   }
   p, li {
-    @apply text-xl;
+    @apply font-normal;
   }
 }
 
@@ -70,7 +70,7 @@ body {
 }
 
 
-/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
+/* When the screen is less than 881 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
 @media screen and (max-width: 881px) {
 .topnav a {display: none;}
 .topnav a.icon {

From dd79a631fdd017841b02fa20184a9db2ab3740b3 Mon Sep 17 00:00:00 2001
From: daniellemaxwell <danielle@rotational.io>
Date: Mon, 24 Oct 2022 18:06:15 -0400
Subject: [PATCH 2/5] Centered heading text

---
 .../src/components/content/PageTitle.js       |   6 ++--
 .../src/components/layout/Footer.js           |  10 +++----
 .../src/components/layout/Header.js           |  27 ++++--------------
 .../src/components/layout/Main.js             |   2 +-
 .../src/components/layout/Navbar.js           |   4 +--
 .../components/layout/img}/wave.png           | Bin
 .../src/components/pages/Home.js              |  16 ++++++-----
 web/ensign-landing-page/src/input.css         |   3 +-
 web/ensign-landing-page/tailwind.config.js    |   1 +
 9 files changed, 28 insertions(+), 41 deletions(-)
 rename web/ensign-landing-page/{public => src/components/layout/img}/wave.png (100%)

diff --git a/web/ensign-landing-page/src/components/content/PageTitle.js b/web/ensign-landing-page/src/components/content/PageTitle.js
index 683fadb13..86eb14b67 100644
--- a/web/ensign-landing-page/src/components/content/PageTitle.js
+++ b/web/ensign-landing-page/src/components/content/PageTitle.js
@@ -2,9 +2,9 @@ import React from "react";
 
 export default function PageTitle() {
     return (
-        <section className="text-white text-left">
-            <div className="container pl-3 pt-5 sm:pl-20">
-              <h1 className="pb-1 text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
+        <section className="text-white xl:max-w-7xl mx-auto">
+            <div className="pl-3 pt-5 sm:pl-20">
+              <h1 className="text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
               <h2 className="text-base md:text-2xl lg:text-3xl">Powering Realtime Experiences</h2>
               <h2 className="text-base md:text-2xl lg:text-3xl lg:text-5xl">&amp; Data-driven Apps</h2>
             </div>
diff --git a/web/ensign-landing-page/src/components/layout/Footer.js b/web/ensign-landing-page/src/components/layout/Footer.js
index c0e06cd0e..06a8dcde9 100644
--- a/web/ensign-landing-page/src/components/layout/Footer.js
+++ b/web/ensign-landing-page/src/components/layout/Footer.js
@@ -27,13 +27,13 @@ export default function Footer() {
                             </p>
                     </div>
                     <div className="ml-10 xl:ml-5 sm:mt-0 mt-8">
-                        <ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-32 gap-y-4">
+                        <ul className="sm:grid grid-cols-2 lg:flex flex-col gap-0 mr-5 xl:grid grid-cols-2 gap-x-28 gap-y-4">
                                 <li className="pb-8">
                                     <a href="mailto:info@rotational.io" className="flex items-center" target="_blank" rel="noreferrer">
                                         <img 
                                             src={email} 
                                             alt="Envelope" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">info@rotational.io</span>
                                     </a>
@@ -43,7 +43,7 @@ export default function Footer() {
                                         <img 
                                             src={github} 
                                             alt="GitHub logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">rotationalio</span>
                                     </a>
@@ -53,7 +53,7 @@ export default function Footer() {
                                         <img 
                                             src={twitter} 
                                             alt="Twitter logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">rotationalio</span>
                                     </a>
@@ -63,7 +63,7 @@ export default function Footer() {
                                         <img 
                                             src={linkedin} 
                                             alt="LinkedIn logo" 
-                                            className="p-4 bg-white rounded-lg mr-4" 
+                                            className="p-4 bg-white rounded-lg mr-3" 
                                             />
                                         <span className="text-lg">Rotational</span>
                                     </a>
diff --git a/web/ensign-landing-page/src/components/layout/Header.js b/web/ensign-landing-page/src/components/layout/Header.js
index 3d94afb80..e0b0b442f 100644
--- a/web/ensign-landing-page/src/components/layout/Header.js
+++ b/web/ensign-landing-page/src/components/layout/Header.js
@@ -2,30 +2,13 @@ import React from 'react';
 import Navbar from './Navbar';
 import PageTitle from '../content/PageTitle';
 
-const style = {
-  backgroundImage: `url(${process.env.PUBLIC_URL + '/hero.png'})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'right',
-  backgroundSize: '882.5px 480px',
-  minHeight: '480px',
-  width: '100%',
-}
-
-const hwrap = {
-  backgroundImage: `url(${process.env.PUBLIC_URL + '/wave.png'})`,
-  backgroundRepeat: 'x',
-  backgroundPosition: 'right',
-  minHeight: '480px',
-  width: '100%',
-}
-
 export default function Header() {
     return (
-        <div style={hwrap}>
-          <header style={style}>
-                  <Navbar />
-                  <PageTitle />
+        <div className="bg-wave-pattern bg-repeat-x bg-right min-h-[480px] w-screen">
+          <header className="bg-hero bg-no-repeat bg-right bg-[length:882.5px_480px] min-h-[480px] w-screen">
+            <Navbar />
+            <PageTitle />
           </header>
-          </div>
+        </div>
     )
 }
\ No newline at end of file
diff --git a/web/ensign-landing-page/src/components/layout/Main.js b/web/ensign-landing-page/src/components/layout/Main.js
index c2ffbf0a3..b28e024d3 100644
--- a/web/ensign-landing-page/src/components/layout/Main.js
+++ b/web/ensign-landing-page/src/components/layout/Main.js
@@ -3,7 +3,7 @@ import AccessForm from "../content/AccessForm";
 
 export default function Main() {
     return(
-        <main className="mx-auto container pt-8">
+        <main className="container pt-8">
             <section className="xl:grid grid-cols-3 gap-8">
                 <section className="col-span-2">
                     <h2 className="leading-10 pb-5">Powering Real-time Apps & Analytics</h2>
diff --git a/web/ensign-landing-page/src/components/layout/Navbar.js b/web/ensign-landing-page/src/components/layout/Navbar.js
index 4029a68a6..64e2470fb 100644
--- a/web/ensign-landing-page/src/components/layout/Navbar.js
+++ b/web/ensign-landing-page/src/components/layout/Navbar.js
@@ -4,13 +4,13 @@ import logo from '../layout/img/logo.png'
 
 export default function Navbar() {
     return (
-        <nav className="relative max-w-7xl flex items-center justify-between text-white">
+        <nav className="mx-auto max-w-7xl flex items-center justify-between text-white">
           <a href="https://rotational.io" target="_blank" rel="noreferrer" className="pt-3">
             <img
               src={logo}
               alt="Rotational Labs logo"
               className="pl-3 h-14 w-auto sm:pl-20 h-14"
-            />
+              />
           </a>
           <ul className="topnav" id="myTopnav">
             <li><a href="https://rotational.app">Ensign</a></li>
diff --git a/web/ensign-landing-page/public/wave.png b/web/ensign-landing-page/src/components/layout/img/wave.png
similarity index 100%
rename from web/ensign-landing-page/public/wave.png
rename to web/ensign-landing-page/src/components/layout/img/wave.png
diff --git a/web/ensign-landing-page/src/components/pages/Home.js b/web/ensign-landing-page/src/components/pages/Home.js
index 3fbe52bff..8a8c598a3 100644
--- a/web/ensign-landing-page/src/components/pages/Home.js
+++ b/web/ensign-landing-page/src/components/pages/Home.js
@@ -11,13 +11,15 @@ const Home = () => {
     return (
         <>
           <Header />
-          <Main />
-          <Diagram />
-          <BuildApps />
-          <DevExperience />
-         <div className="bg-[#ECF6FF]">
-            <Footer />
-         </div>
+          <div className="max-w-6xl mx-auto">
+            <Main />
+            <Diagram />
+            <BuildApps />
+            <DevExperience />
+          </div>
+          <div className="bg-[#ECF6FF]">
+              <Footer />
+            </div>
         </>
       );
 }
diff --git a/web/ensign-landing-page/src/input.css b/web/ensign-landing-page/src/input.css
index fb9f81962..eae289844 100644
--- a/web/ensign-landing-page/src/input.css
+++ b/web/ensign-landing-page/src/input.css
@@ -9,7 +9,8 @@
 
 @layer base {
   h1 {
-    @apply font-bold
+    @apply font-bold;
+    @apply pb-1;
   }
   h2 {
     @apply text-4xl;
diff --git a/web/ensign-landing-page/tailwind.config.js b/web/ensign-landing-page/tailwind.config.js
index 667bb1c47..14d103b1e 100644
--- a/web/ensign-landing-page/tailwind.config.js
+++ b/web/ensign-landing-page/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     backgroundImage: {
       'hero': "url('/src/components/layout/img/hero.png')",
+      'wave-pattern': "url('/src/components/layout/img/wave.png')",
       'footer': "url('/src/components/layout/img/foot.png')",
     },
     extend: {}

From e99845c4365bcc09060fd0fac08306cc180e35c8 Mon Sep 17 00:00:00 2001
From: daniellemaxwell <danielle@rotational.io>
Date: Mon, 24 Oct 2022 18:12:20 -0400
Subject: [PATCH 3/5] Adjusted dev experience section

---
 web/ensign-landing-page/src/components/layout/BuildApps.js     | 2 +-
 web/ensign-landing-page/src/components/layout/DevExperience.js | 2 +-
 web/ensign-landing-page/src/components/layout/Diagram.js       | 2 +-
 web/ensign-landing-page/src/components/pages/Home.js           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/ensign-landing-page/src/components/layout/BuildApps.js b/web/ensign-landing-page/src/components/layout/BuildApps.js
index 4ec2bed1b..9f1f8b0ad 100644
--- a/web/ensign-landing-page/src/components/layout/BuildApps.js
+++ b/web/ensign-landing-page/src/components/layout/BuildApps.js
@@ -3,7 +3,7 @@ import React from 'react';
 export default function BuildApps() {
     return (
     <section className="pb-20">
-        <div className="container mx-auto">
+        <div className="container">
             <h2 className="lg:leading-loose pb-2 text-left">Spend Your Time Writing Code, Not YAML</h2>
             <div className="text-left leading-relaxed">
                 <p className="pb-7">
diff --git a/web/ensign-landing-page/src/components/layout/DevExperience.js b/web/ensign-landing-page/src/components/layout/DevExperience.js
index 04ebf83de..a407c7c93 100644
--- a/web/ensign-landing-page/src/components/layout/DevExperience.js
+++ b/web/ensign-landing-page/src/components/layout/DevExperience.js
@@ -3,7 +3,7 @@ import React from 'react'
 export default function DevExperience() {
     return (
         <section className="bg-[#ECF6FF] min-w-min">
-            <div className="mx-auto container pb-20">
+            <div className="max-w-6xl mx-auto container pb-20">
                 <h2 className="sm:leading-loose py-5 text-left">The Developer Experience</h2>
                 <p className="text-left pb-5">Ensign is an advanced event data store designed with application developers, data scientists, and product managers in mind. Ensign combines fast transactional services with decoupled processing and rich, insight-driven online analysis, without the need for additional infrastructure or a PhD. in Kafka. Ensign makes event-driven microservices accessible to everyday developers, data scientists, and product managers.</p>
                 <ul className="list-disc list-outside text-left pl-10">
diff --git a/web/ensign-landing-page/src/components/layout/Diagram.js b/web/ensign-landing-page/src/components/layout/Diagram.js
index 8ec4b5050..3b5666aa4 100644
--- a/web/ensign-landing-page/src/components/layout/Diagram.js
+++ b/web/ensign-landing-page/src/components/layout/Diagram.js
@@ -3,7 +3,7 @@ import diagram from './img/ensign-diagram.png'
 
 export default function Diagram() {
     return (
-        <section className="mx-auto container pb-10">
+        <section className="container pb-10">
           <h2>Data Engineering Simplified</h2>
           <img 
             className="mx-auto" 
diff --git a/web/ensign-landing-page/src/components/pages/Home.js b/web/ensign-landing-page/src/components/pages/Home.js
index 8a8c598a3..d109db4de 100644
--- a/web/ensign-landing-page/src/components/pages/Home.js
+++ b/web/ensign-landing-page/src/components/pages/Home.js
@@ -15,8 +15,8 @@ const Home = () => {
             <Main />
             <Diagram />
             <BuildApps />
-            <DevExperience />
           </div>
+          <DevExperience />
           <div className="bg-[#ECF6FF]">
               <Footer />
             </div>

From fec0a75b0253a41b75a405203efd9a13132eba14 Mon Sep 17 00:00:00 2001
From: daniellemaxwell <danielle@rotational.io>
Date: Tue, 25 Oct 2022 10:37:49 -0400
Subject: [PATCH 4/5] Minor updates to improve appearance on smaller screens

---
 web/ensign-landing-page/src/components/layout/BuildApps.js     | 2 +-
 web/ensign-landing-page/src/components/layout/DevExperience.js | 2 +-
 web/ensign-landing-page/src/components/pages/Home.js           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/ensign-landing-page/src/components/layout/BuildApps.js b/web/ensign-landing-page/src/components/layout/BuildApps.js
index 9f1f8b0ad..f764f2978 100644
--- a/web/ensign-landing-page/src/components/layout/BuildApps.js
+++ b/web/ensign-landing-page/src/components/layout/BuildApps.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function BuildApps() {
     return (
-    <section className="pb-20">
+    <section>
         <div className="container">
             <h2 className="lg:leading-loose pb-2 text-left">Spend Your Time Writing Code, Not YAML</h2>
             <div className="text-left leading-relaxed">
diff --git a/web/ensign-landing-page/src/components/layout/DevExperience.js b/web/ensign-landing-page/src/components/layout/DevExperience.js
index a407c7c93..dda4f96b3 100644
--- a/web/ensign-landing-page/src/components/layout/DevExperience.js
+++ b/web/ensign-landing-page/src/components/layout/DevExperience.js
@@ -3,7 +3,7 @@ import React from 'react'
 export default function DevExperience() {
     return (
         <section className="bg-[#ECF6FF] min-w-min">
-            <div className="max-w-6xl mx-auto container pb-20">
+            <div className="max-w-xl container pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
                 <h2 className="sm:leading-loose py-5 text-left">The Developer Experience</h2>
                 <p className="text-left pb-5">Ensign is an advanced event data store designed with application developers, data scientists, and product managers in mind. Ensign combines fast transactional services with decoupled processing and rich, insight-driven online analysis, without the need for additional infrastructure or a PhD. in Kafka. Ensign makes event-driven microservices accessible to everyday developers, data scientists, and product managers.</p>
                 <ul className="list-disc list-outside text-left pl-10">
diff --git a/web/ensign-landing-page/src/components/pages/Home.js b/web/ensign-landing-page/src/components/pages/Home.js
index d109db4de..1831dbf12 100644
--- a/web/ensign-landing-page/src/components/pages/Home.js
+++ b/web/ensign-landing-page/src/components/pages/Home.js
@@ -11,7 +11,7 @@ const Home = () => {
     return (
         <>
           <Header />
-          <div className="max-w-6xl mx-auto">
+          <div className="max-w-xl pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
             <Main />
             <Diagram />
             <BuildApps />

From a33d4c4e84d2647437eb88cce99ef73d7f4d00a2 Mon Sep 17 00:00:00 2001
From: daniellemaxwell <danielle@rotational.io>
Date: Tue, 25 Oct 2022 11:23:07 -0400
Subject: [PATCH 5/5] Updated max width

---
 web/ensign-landing-page/src/components/content/PageTitle.js    | 2 +-
 web/ensign-landing-page/src/components/layout/DevExperience.js | 2 +-
 web/ensign-landing-page/src/components/pages/Home.js           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/ensign-landing-page/src/components/content/PageTitle.js b/web/ensign-landing-page/src/components/content/PageTitle.js
index 86eb14b67..0246888d0 100644
--- a/web/ensign-landing-page/src/components/content/PageTitle.js
+++ b/web/ensign-landing-page/src/components/content/PageTitle.js
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function PageTitle() {
     return (
-        <section className="text-white xl:max-w-7xl mx-auto">
+        <section className="text-white max-w-7xl mx-auto">
             <div className="pl-3 pt-5 sm:pl-20">
               <h1 className="text-3xl sm:text-3xl lg:text-5xl xl:text-7xl">Ensign</h1>
               <h2 className="text-base md:text-2xl lg:text-3xl">Powering Realtime Experiences</h2>
diff --git a/web/ensign-landing-page/src/components/layout/DevExperience.js b/web/ensign-landing-page/src/components/layout/DevExperience.js
index dda4f96b3..092556fc8 100644
--- a/web/ensign-landing-page/src/components/layout/DevExperience.js
+++ b/web/ensign-landing-page/src/components/layout/DevExperience.js
@@ -3,7 +3,7 @@ import React from 'react'
 export default function DevExperience() {
     return (
         <section className="bg-[#ECF6FF] min-w-min">
-            <div className="max-w-xl container pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
+            <div className="container max-w-7xl mx-auto pl-2 pb-20">
                 <h2 className="sm:leading-loose py-5 text-left">The Developer Experience</h2>
                 <p className="text-left pb-5">Ensign is an advanced event data store designed with application developers, data scientists, and product managers in mind. Ensign combines fast transactional services with decoupled processing and rich, insight-driven online analysis, without the need for additional infrastructure or a PhD. in Kafka. Ensign makes event-driven microservices accessible to everyday developers, data scientists, and product managers.</p>
                 <ul className="list-disc list-outside text-left pl-10">
diff --git a/web/ensign-landing-page/src/components/pages/Home.js b/web/ensign-landing-page/src/components/pages/Home.js
index 1831dbf12..5486288cb 100644
--- a/web/ensign-landing-page/src/components/pages/Home.js
+++ b/web/ensign-landing-page/src/components/pages/Home.js
@@ -11,7 +11,7 @@ const Home = () => {
     return (
         <>
           <Header />
-          <div className="max-w-xl pl-2 pb-20 mx-auto sm:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
+          <div className="max-w-7xl mx-auto pb-20">
             <Main />
             <Diagram />
             <BuildApps />