Moved footer image to background image

docs/content/system/configuration.md

@@ -165,6 +165,30 @@ Quarterdeck uses [Sentry](https://sentry.io/) to assist with error monitoring an
 
 Sentry is considered **enabled** if a DSN is configured. Performance tracing is only enabled if Sentry is enabled *and* track performance is set to true. If Sentry is enabled, an environment is required, otherwise the configuration will be invalid.
 
+### React App
+
+A React app delivers the Ensign UI. Its environment variables are all prefixed with the `REACT_APP` tag. The primary configuration is as follows:
+
+## Google Analytics
+
+The React app uses [Google Analytics](https://analytics.google.com/) to monitor website traffic. Configure the React app to use Google Analytics as follows:
+
+| EnvVar                          | Type    | Default     | Description                                                                                       |
+|---------------------------------|---------|-------------|---------------------------------------------------------------------------------------------------|
+| REACT_APP_ANALYTICS_ID          | string  |             | Google Analytics tracking ID for the React App.                                                   |
+
+
+## Sentry
+
+The React app uses [Sentry](https://sentry.io/) to assist with error monitoring and performance tracing. Configure the React app to use Sentry as follows:
+
+| EnvVar                          | Type    | Default     | Description                                                                                       |
+|---------------------------------|---------|-------------|---------------------------------------------------------------------------------------------------|
+| REACT_APP_SENTRY_DSN            | string  |             | The DSN for the Sentry project. If not set then Sentry is considered disabled.                    |
+| REACT_APP_SENTRY_ENVIRONMENT    | string  |             | The environment to report (e.g. development, staging, production). Required if Sentry is enabled.                                              |
+
+Sentry is considered **enabled** if a DSN is configured. Performance tracing is only enabled if Sentry is enabled *and* track performance is set to true. If Sentry is enabled, an environment is required, otherwise the configuration will be invalid.
+
 # Development
 
 {{< hint danger >}}

web/ensign-landing-page/src/components/content/AccessForm.js

@@ -43,7 +43,7 @@ export default function AccessForm () {
             });
         }}
         children={({ errors, status, touched }) => (
-          <Form className="w-[26rem] p-7 bg-[#DED6C5] mx-auto">
+          <Form className="w-[26rem] p-7 bg-[#DED6C5] mx-auto max-w-full">
             <div>
               <h3 className="pb-2 text-2xl font-bold">Request Alpha Access Today</h3>
               <p className="pb-3">We're opening up Ensign on a limited basis. No credit card required.</p>

web/ensign-landing-page/src/components/content/PageTitle.js

@@ -3,10 +3,10 @@ import React from "react";
 export default function PageTitle() {
     return (
         <section className="text-white text-left">
-            <div className="container pl-5 pt-5 sm:pl-20">
-              <h1 className="pb-1 text-xl sm:text-6xl xl:text-7xl">Ensign</h1>
-              <h2 className="font-light text-base sm:text-xl md:text-3xl">Powering Realtime Experiences</h2>
-              <h2 className="font-light text-base sm:text-xl md:text-3xl">&amp; Data-driven Apps</h2>
+            <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>
             </div>
         </section>
     )

web/ensign-landing-page/src/components/layout/Footer.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import footer from './img/foot.png'
 import whiteLogo from './img/logo-white.png'
 import email from './img/email.png'
 import github from './img/github.png'
@@ -8,32 +7,27 @@ import twitter from './img/twitter-icon.png'
 
 export default function Footer() {
     return (
-        <footer>
-        <div className="relative pt-[90px] sm:pt-[300px] font-extralight">
-            <img 
-                className="w-full absolute inset-y-0 left-0 lg:h-full lg:w-full lg:max-w-none" 
-                src={footer} 
-                alt="Illustration of a blue lighthouse on the left hand side." 
-                />
-            <div className="relative max-w-7xl mx-auto px-4 sm:px-6 bg-[#192E5B]">
-                <div className="lg:flex text-white">
+        <footer className="bg-footer bg-no-repeat bg-cover">
+        <div className="relative pt-[90px] pt-[350px] font-extralight">
+            <div className="relative max-w-7xl mx-auto px-4 sm:px-6">
+                <div className="lg:grid grid-cols-3 text-white">
                 <div>
                     <a href="https://rotational.io/" target="_blank" rel="noreferrer">
                         <img 
                             src={whiteLogo} 
                             alt="Rotational Labs logo" 
-                            className="sm:h-auto h-16" 
+                            className="mt-10 sm:mt-0 mx-auto sm:pb-5 mr-1-" 
                             />
                     </a>
                 </div>
-                    <div className="sm:ml-24 mt-5 sm:mt-0 max-w-lg pb-8">
-                         <h5 className="font-bold text-lg">Contact Details</h5>
-                            <p className="mt-3 text-lg">
+                    <div className="mx-auto mt-5 sm:mt-0 max-w-lg pb-8 xl:mr-5">
+                         <h5 className="text-center lg:text-start font-bold text-lg">Contact Details</h5>
+                            <p className="mt-3 ml-10 sm:ml-0 text-lg">
                                 We love to talk through complex scaling and performance issues. What's slowing you down? Drop us a line for a friendly chat. We'll make it worth your while.
                             </p>
                     </div>
-                    <div className="sm:ml-24 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-20 gap-8">
+                    <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">
                                 <li className="pb-8">
                                     <a href="mailto:info@rotational.io" className="flex items-center" target="_blank" rel="noreferrer">
                                         <img 

web/ensign-landing-page/src/components/layout/Header.js

@@ -6,7 +6,7 @@ const style = {
   backgroundImage: `url(${process.env.PUBLIC_URL + '/hero.png'})`,
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'right',
-  backgroundSize: '853px 480px',
+  backgroundSize: '882.5px 480px',
   minHeight: '480px',
   width: '100%',
 }
@@ -26,6 +26,6 @@ export default function Header() {
                   <Navbar />
                   <PageTitle />
           </header>
-        </div>
+          </div>
     )
 }

web/ensign-landing-page/src/components/layout/Navbar.js

@@ -9,7 +9,7 @@ export default function Navbar() {
             <img
               src={logo}
               alt="Rotational Labs logo"
-              className="pl-5 h-14 w-auto sm:pl-20 h-14"
+              className="pl-3 h-14 w-auto sm:pl-20 h-14"
             />
           </a>
           <ul className="topnav" id="myTopnav">

web/ensign-landing-page/src/components/pages/Confirmation.js

@@ -10,35 +10,39 @@ const Confirmation = () => {
         <>
             <Header />
             <section className="mx-auto container pt-8 pb-10">
-              <div className="grid grid-cols-3 gap-8">
-                <section className="col-span-2">
-                    <h2 className="leading-10">Success! Thank you for your interest in Ensign.</h2>
-                    <h3 className="pb-5 font-bold">We'll be in touch soon.</h3>
-                    <p className="pb-3">Now you might be thinking: Why sea otters?</p>
-                    <div className="flex">
-                        <p className="pb-10">Oh, don't get us started!</p>
-                        <img
-                            src={finger}
-                            alt="A pointer finger outlined in blue."
-                            className="pl-5 flex h-8"
-                        />
-                    </div>
-
-                    <h3 className="pb-5 font-bold">What next?</h3>
-                    <ul className="pb-5 list-disc list-inside">
-                        <li className="pb-1">Expect a confirmation email from us.</li>
-                        <li className="pb-1">Tweet about <a href="https://twitter.com/rotationalio" className="text-[#1D66A6]">us</a> (or <a href="https://twitter.com/in_otter_news2" className="text-[#1D66A6]">sea otters</a>)?</li>
-                        <li className="pb-1"><a href="https://www.gentlydownthe.stream/" className="text-[#1D66A6]">Teach your kids (or friends) about streaming</a></li>
-                        <li className="pb-1">Dream about your first event stream.</li>
-                    </ul>
-                    <p>Probably you'll just wait to hear from us.</p>
-                </section>
-                <section>
-                    <img
-                    src={seaotter}
-                    alt="A sea otter in a pool playing basketball."/>
-                </section>
-              </div>
+                <div className="grid grid-cols-3 gap-8">
+                    <section className="col-span-2">
+                        <h2 className="leading-10 pb-5">Success! Thank you for your interest in Ensign.</h2>
+                        <h3 className="pb-5 font-bold">We'll be in touch soon.</h3>
+                        <div className="grid grid-cols-2">
+                            <div>
+                                <p className="pb-3">Now you might be thinking: Why sea otters?</p>
+                                <div className="flex pb-10">
+                                    <p>Oh, don't get us started!</p>
+                                    <img
+                                        src={finger}
+                                        alt="A pointer finger outlined in blue."
+                                        className="pl-5 flex h-8"
+                                        />
+                                </div>
+                                <h3 className="pb-5 font-bold">What next?</h3>
+                                <ul className="pl-5 pb-5 list-disc list-outside">
+                                    <li className="pb-1">Expect a confirmation email from us.</li>
+                                    <li className="pb-1">Tweet about <a href="https://twitter.com/rotationalio" target="_blank" rel="noreferrer" className="text-[#1D66A6]">us</a> (or <a href="https://twitter.com/in_otter_news2" target="_blank" rel="noreferrer" className="text-[#1D66A6]">sea otters</a>)?</li>
+                                    <li className="pb-1"><a href="https://www.gentlydownthe.stream/" target="_blank" rel="noreferrer" className="text-[#1D66A6]">Teach your kids (or friends) about streaming.</a></li>
+                                    <li className="pb-1">Dream about your first event stream.</li>
+                                </ul>
+                            </div>
+                            <div className="ml-10">
+                                <img
+                                    src={seaotter}
+                                    alt="A sea otter in a pool playing basketball."
+                                    />
+                            </div>
+                        </div>
+                        <p>Probably you'll just wait to hear from us.</p>
+                    </section>
+                </div>
             </section>
             <Footer />
         </>

web/ensign-landing-page/src/input.css

@@ -71,7 +71,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) */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 881px) {
 .topnav a {display: none;}
 .topnav a.icon {
   float: right;
@@ -80,7 +80,7 @@ body {
 }
 
 /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 881px) {
 .topnav.responsive {
   position: fixed;
   right: 0;

web/ensign-landing-page/tailwind.config.js

@@ -5,7 +5,6 @@ module.exports = {
     backgroundImage: {
       'hero': "url('/src/components/layout/img/hero.png')",
       'footer': "url('/src/components/layout/img/foot.png')",
-      'wave': "url('/src/components/layout/img/footer-wave.png')",
     },
     extend: {}
   },