From 9dc9280a380609b6227418ebe41952af48606c8c Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Fri, 27 Sep 2024 12:23:55 -0700
Subject: [PATCH 1/8] Update tsconfig for new layout [#134]

---
 static-site/tsconfig.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/static-site/tsconfig.json b/static-site/tsconfig.json
index e9e6b477e..55dce1703 100644
--- a/static-site/tsconfig.json
+++ b/static-site/tsconfig.json
@@ -54,8 +54,16 @@ be set and will rewrite this file if they aren't set.²
     "esModuleInterop": true,
     "module": "esnext",
     "resolveJsonModule": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
+    ".next/types/**/*.ts",
+    "app/**/*",
+    "components/**/*",
     "next-env.d.ts",
     "pages/**/*",
     "src/**/*",

From 3e7fe67d8a2fc0ffbdc85f60063347332200206f Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Wed, 25 Sep 2024 12:19:05 -0700
Subject: [PATCH 2/8] Basic layout and nav implemented in App Router [#134]

_Largely_ derived from material in Pages Router pages and components,
but with a number of redundant or otherwise unneeded styling elements
excised for minimalism.

Does not yet implement logged in state, and explicitly drops
"minimized" as a nav-bar concept, at least for the moment.
---
 static-site/app/layout.tsx                    |   85 +
 static-site/app/styles/bootstrap.css          | 3872 +++++++++++++++++
 .../app/styles/browserCompatability.css       |  446 ++
 static-site/app/styles/globals.css            |  137 +
 static-site/components/footer/index.tsx       |   85 +
 .../components/footer/site-map.module.css     |   46 +
 static-site/components/footer/site-map.tsx    |   50 +
 static-site/components/footer/sitemap.ts      |   49 +
 static-site/components/footer/team-list.tsx   |   30 +
 static-site/components/line/index.tsx         |    8 +
 static-site/components/line/styles.module.css |    5 +
 static-site/components/logos/index.tsx        |  128 +
 .../components/logos/styles.module.css        |   26 +
 static-site/components/nav/index.tsx          |   31 +
 static-site/components/nav/nav-logo.tsx       |   43 +
 static-site/components/nav/styles.css         |   30 +
 .../components/people/avatars.module.css      |   30 +
 static-site/components/people/avatars.tsx     |   42 +
 static-site/components/people/teamMembers.ts  |  219 +
 .../components/plausible-analytics/index.tsx  |   16 +
 static-site/components/spacers/index.tsx      |   37 +
 21 files changed, 5415 insertions(+)
 create mode 100644 static-site/app/layout.tsx
 create mode 100644 static-site/app/styles/bootstrap.css
 create mode 100644 static-site/app/styles/browserCompatability.css
 create mode 100644 static-site/app/styles/globals.css
 create mode 100644 static-site/components/footer/index.tsx
 create mode 100644 static-site/components/footer/site-map.module.css
 create mode 100644 static-site/components/footer/site-map.tsx
 create mode 100644 static-site/components/footer/sitemap.ts
 create mode 100644 static-site/components/footer/team-list.tsx
 create mode 100644 static-site/components/line/index.tsx
 create mode 100644 static-site/components/line/styles.module.css
 create mode 100644 static-site/components/logos/index.tsx
 create mode 100644 static-site/components/logos/styles.module.css
 create mode 100644 static-site/components/nav/index.tsx
 create mode 100644 static-site/components/nav/nav-logo.tsx
 create mode 100644 static-site/components/nav/styles.css
 create mode 100644 static-site/components/people/avatars.module.css
 create mode 100644 static-site/components/people/avatars.tsx
 create mode 100644 static-site/components/people/teamMembers.ts
 create mode 100644 static-site/components/plausible-analytics/index.tsx
 create mode 100644 static-site/components/spacers/index.tsx

diff --git a/static-site/app/layout.tsx b/static-site/app/layout.tsx
new file mode 100644
index 000000000..9397ff8e0
--- /dev/null
+++ b/static-site/app/layout.tsx
@@ -0,0 +1,85 @@
+import { Metadata } from "next";
+import { Lato } from "next/font/google";
+import React from "react";
+
+import { BigSpacer } from "../components/spacers";
+import Footer from "../components/footer";
+import Line from "../components/line";
+import Nav from "../components/nav";
+import PlausibleAnalytics from "../components/plausible-analytics/";
+import {
+  blogFeedUrls,
+  groupsApp,
+  siteTitle,
+  siteTitleAlt,
+} from "../data/BaseConfig";
+
+import "./styles/browserCompatability.css";
+import "./styles/bootstrap.css";
+import "./styles/globals.css";
+
+// Custom fonts bundled (i.e. no external requests), see
+// <https://nextjs.org/docs/pages/building-your-application/optimizing/fonts>
+const lato = Lato({
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  variable: "--lato",
+  weight: ["300", "400", "700"],
+});
+
+export const metadata: Metadata = {
+  title: {
+    absolute: siteTitle,
+    template: `%s - ${siteTitle}`,
+  },
+  description: siteTitleAlt,
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <html lang="en">
+      <head>
+        {!groupsApp && (
+          <>
+            <link rel="me" href="https://mstdn.science/@nextstrain" />
+            <link
+              href={`${blogFeedUrls.atom}`}
+              rel="alternate"
+              title="Atom feed for nextstrain.org/blog"
+              type="application/atom+xml"
+            />
+            <link
+              href={`${blogFeedUrls.json}`}
+              rel="alternate"
+              title="JSON feed for nextstrain.org/blog"
+              type="application/json"
+            />
+            <link
+              href={`${blogFeedUrls.rss2}`}
+              rel="alternate"
+              title="RSS2 feed for nextstrain.org/blog"
+              type="application/rss+xml"
+            />
+          </>
+        )}
+      </head>
+      <body className={lato.variable}>
+        <Nav />
+        <main>
+          {children}
+
+          <Line />
+
+          <Footer />
+
+          <BigSpacer />
+        </main>
+        <PlausibleAnalytics />
+      </body>
+    </html>
+  );
+}
diff --git a/static-site/app/styles/bootstrap.css b/static-site/app/styles/bootstrap.css
new file mode 100644
index 000000000..9f6dd4bde
--- /dev/null
+++ b/static-site/app/styles/bootstrap.css
@@ -0,0 +1,3872 @@
+/*!
+ * Bootstrap Grid v4.6.2 (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Copyright 2011-2022 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+html {
+  box-sizing: border-box;
+  -ms-overflow-style: scrollbar;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.container,
+.container-fluid,
+.container-sm,
+.container-md,
+.container-lg,
+.container-xl {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container, .container-sm {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container, .container-sm, .container-md {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container, .container-sm, .container-md, .container-lg {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl {
+    max-width: 1140px;
+  }
+}
+
+.row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.no-gutters > .col,
+.no-gutters > [class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
+.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
+.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
+.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
+.col-xl-auto {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.col {
+  -ms-flex-preferred-size: 0;
+  flex-basis: 0;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.row-cols-1 > * {
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.row-cols-2 > * {
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.row-cols-3 > * {
+  -ms-flex: 0 0 33.333333%;
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+}
+
+.row-cols-4 > * {
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.row-cols-5 > * {
+  -ms-flex: 0 0 20%;
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.row-cols-6 > * {
+  -ms-flex: 0 0 16.666667%;
+  flex: 0 0 16.666667%;
+  max-width: 16.666667%;
+}
+
+.col-auto {
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.col-1 {
+  -ms-flex: 0 0 8.333333%;
+  flex: 0 0 8.333333%;
+  max-width: 8.333333%;
+}
+
+.col-2 {
+  -ms-flex: 0 0 16.666667%;
+  flex: 0 0 16.666667%;
+  max-width: 16.666667%;
+}
+
+.col-3 {
+  -ms-flex: 0 0 25%;
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.col-4 {
+  -ms-flex: 0 0 33.333333%;
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+}
+
+.col-5 {
+  -ms-flex: 0 0 41.666667%;
+  flex: 0 0 41.666667%;
+  max-width: 41.666667%;
+}
+
+.col-6 {
+  -ms-flex: 0 0 50%;
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.col-7 {
+  -ms-flex: 0 0 58.333333%;
+  flex: 0 0 58.333333%;
+  max-width: 58.333333%;
+}
+
+.col-8 {
+  -ms-flex: 0 0 66.666667%;
+  flex: 0 0 66.666667%;
+  max-width: 66.666667%;
+}
+
+.col-9 {
+  -ms-flex: 0 0 75%;
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.col-10 {
+  -ms-flex: 0 0 83.333333%;
+  flex: 0 0 83.333333%;
+  max-width: 83.333333%;
+}
+
+.col-11 {
+  -ms-flex: 0 0 91.666667%;
+  flex: 0 0 91.666667%;
+  max-width: 91.666667%;
+}
+
+.col-12 {
+  -ms-flex: 0 0 100%;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.order-first {
+  -ms-flex-order: -1;
+  order: -1;
+}
+
+.order-last {
+  -ms-flex-order: 13;
+  order: 13;
+}
+
+.order-0 {
+  -ms-flex-order: 0;
+  order: 0;
+}
+
+.order-1 {
+  -ms-flex-order: 1;
+  order: 1;
+}
+
+.order-2 {
+  -ms-flex-order: 2;
+  order: 2;
+}
+
+.order-3 {
+  -ms-flex-order: 3;
+  order: 3;
+}
+
+.order-4 {
+  -ms-flex-order: 4;
+  order: 4;
+}
+
+.order-5 {
+  -ms-flex-order: 5;
+  order: 5;
+}
+
+.order-6 {
+  -ms-flex-order: 6;
+  order: 6;
+}
+
+.order-7 {
+  -ms-flex-order: 7;
+  order: 7;
+}
+
+.order-8 {
+  -ms-flex-order: 8;
+  order: 8;
+}
+
+.order-9 {
+  -ms-flex-order: 9;
+  order: 9;
+}
+
+.order-10 {
+  -ms-flex-order: 10;
+  order: 10;
+}
+
+.order-11 {
+  -ms-flex-order: 11;
+  order: 11;
+}
+
+.order-12 {
+  -ms-flex-order: 12;
+  order: 12;
+}
+
+.offset-1 {
+  margin-left: 8.333333%;
+}
+
+.offset-2 {
+  margin-left: 16.666667%;
+}
+
+.offset-3 {
+  margin-left: 25%;
+}
+
+.offset-4 {
+  margin-left: 33.333333%;
+}
+
+.offset-5 {
+  margin-left: 41.666667%;
+}
+
+.offset-6 {
+  margin-left: 50%;
+}
+
+.offset-7 {
+  margin-left: 58.333333%;
+}
+
+.offset-8 {
+  margin-left: 66.666667%;
+}
+
+.offset-9 {
+  margin-left: 75%;
+}
+
+.offset-10 {
+  margin-left: 83.333333%;
+}
+
+.offset-11 {
+  margin-left: 91.666667%;
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .row-cols-sm-1 > * {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-sm-2 > * {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-sm-3 > * {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .row-cols-sm-4 > * {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-sm-5 > * {
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-sm-6 > * {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-sm-auto {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-sm-1 {
+    -ms-flex: 0 0 8.333333%;
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+  .col-sm-2 {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-sm-3 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-sm-4 {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .col-sm-5 {
+    -ms-flex: 0 0 41.666667%;
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+  .col-sm-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-sm-7 {
+    -ms-flex: 0 0 58.333333%;
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+  .col-sm-8 {
+    -ms-flex: 0 0 66.666667%;
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+  .col-sm-9 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-sm-10 {
+    -ms-flex: 0 0 83.333333%;
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+  .col-sm-11 {
+    -ms-flex: 0 0 91.666667%;
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+  .col-sm-12 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-sm-first {
+    -ms-flex-order: -1;
+    order: -1;
+  }
+  .order-sm-last {
+    -ms-flex-order: 13;
+    order: 13;
+  }
+  .order-sm-0 {
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .order-sm-1 {
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .order-sm-2 {
+    -ms-flex-order: 2;
+    order: 2;
+  }
+  .order-sm-3 {
+    -ms-flex-order: 3;
+    order: 3;
+  }
+  .order-sm-4 {
+    -ms-flex-order: 4;
+    order: 4;
+  }
+  .order-sm-5 {
+    -ms-flex-order: 5;
+    order: 5;
+  }
+  .order-sm-6 {
+    -ms-flex-order: 6;
+    order: 6;
+  }
+  .order-sm-7 {
+    -ms-flex-order: 7;
+    order: 7;
+  }
+  .order-sm-8 {
+    -ms-flex-order: 8;
+    order: 8;
+  }
+  .order-sm-9 {
+    -ms-flex-order: 9;
+    order: 9;
+  }
+  .order-sm-10 {
+    -ms-flex-order: 10;
+    order: 10;
+  }
+  .order-sm-11 {
+    -ms-flex-order: 11;
+    order: 11;
+  }
+  .order-sm-12 {
+    -ms-flex-order: 12;
+    order: 12;
+  }
+  .offset-sm-0 {
+    margin-left: 0;
+  }
+  .offset-sm-1 {
+    margin-left: 8.333333%;
+  }
+  .offset-sm-2 {
+    margin-left: 16.666667%;
+  }
+  .offset-sm-3 {
+    margin-left: 25%;
+  }
+  .offset-sm-4 {
+    margin-left: 33.333333%;
+  }
+  .offset-sm-5 {
+    margin-left: 41.666667%;
+  }
+  .offset-sm-6 {
+    margin-left: 50%;
+  }
+  .offset-sm-7 {
+    margin-left: 58.333333%;
+  }
+  .offset-sm-8 {
+    margin-left: 66.666667%;
+  }
+  .offset-sm-9 {
+    margin-left: 75%;
+  }
+  .offset-sm-10 {
+    margin-left: 83.333333%;
+  }
+  .offset-sm-11 {
+    margin-left: 91.666667%;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md {
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .row-cols-md-1 > * {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-md-2 > * {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-md-3 > * {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .row-cols-md-4 > * {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-md-5 > * {
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-md-6 > * {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-md-auto {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-md-1 {
+    -ms-flex: 0 0 8.333333%;
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+  .col-md-2 {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-md-3 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-md-4 {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .col-md-5 {
+    -ms-flex: 0 0 41.666667%;
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+  .col-md-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-md-7 {
+    -ms-flex: 0 0 58.333333%;
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+  .col-md-8 {
+    -ms-flex: 0 0 66.666667%;
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+  .col-md-9 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-md-10 {
+    -ms-flex: 0 0 83.333333%;
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+  .col-md-11 {
+    -ms-flex: 0 0 91.666667%;
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+  .col-md-12 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-md-first {
+    -ms-flex-order: -1;
+    order: -1;
+  }
+  .order-md-last {
+    -ms-flex-order: 13;
+    order: 13;
+  }
+  .order-md-0 {
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .order-md-1 {
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .order-md-2 {
+    -ms-flex-order: 2;
+    order: 2;
+  }
+  .order-md-3 {
+    -ms-flex-order: 3;
+    order: 3;
+  }
+  .order-md-4 {
+    -ms-flex-order: 4;
+    order: 4;
+  }
+  .order-md-5 {
+    -ms-flex-order: 5;
+    order: 5;
+  }
+  .order-md-6 {
+    -ms-flex-order: 6;
+    order: 6;
+  }
+  .order-md-7 {
+    -ms-flex-order: 7;
+    order: 7;
+  }
+  .order-md-8 {
+    -ms-flex-order: 8;
+    order: 8;
+  }
+  .order-md-9 {
+    -ms-flex-order: 9;
+    order: 9;
+  }
+  .order-md-10 {
+    -ms-flex-order: 10;
+    order: 10;
+  }
+  .order-md-11 {
+    -ms-flex-order: 11;
+    order: 11;
+  }
+  .order-md-12 {
+    -ms-flex-order: 12;
+    order: 12;
+  }
+  .offset-md-0 {
+    margin-left: 0;
+  }
+  .offset-md-1 {
+    margin-left: 8.333333%;
+  }
+  .offset-md-2 {
+    margin-left: 16.666667%;
+  }
+  .offset-md-3 {
+    margin-left: 25%;
+  }
+  .offset-md-4 {
+    margin-left: 33.333333%;
+  }
+  .offset-md-5 {
+    margin-left: 41.666667%;
+  }
+  .offset-md-6 {
+    margin-left: 50%;
+  }
+  .offset-md-7 {
+    margin-left: 58.333333%;
+  }
+  .offset-md-8 {
+    margin-left: 66.666667%;
+  }
+  .offset-md-9 {
+    margin-left: 75%;
+  }
+  .offset-md-10 {
+    margin-left: 83.333333%;
+  }
+  .offset-md-11 {
+    margin-left: 91.666667%;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg {
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .row-cols-lg-1 > * {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-lg-2 > * {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-lg-3 > * {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .row-cols-lg-4 > * {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-lg-5 > * {
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-lg-6 > * {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-lg-auto {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-lg-1 {
+    -ms-flex: 0 0 8.333333%;
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+  .col-lg-2 {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-lg-3 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-lg-4 {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .col-lg-5 {
+    -ms-flex: 0 0 41.666667%;
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+  .col-lg-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-lg-7 {
+    -ms-flex: 0 0 58.333333%;
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+  .col-lg-8 {
+    -ms-flex: 0 0 66.666667%;
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+  .col-lg-9 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-lg-10 {
+    -ms-flex: 0 0 83.333333%;
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+  .col-lg-11 {
+    -ms-flex: 0 0 91.666667%;
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+  .col-lg-12 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-lg-first {
+    -ms-flex-order: -1;
+    order: -1;
+  }
+  .order-lg-last {
+    -ms-flex-order: 13;
+    order: 13;
+  }
+  .order-lg-0 {
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .order-lg-1 {
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .order-lg-2 {
+    -ms-flex-order: 2;
+    order: 2;
+  }
+  .order-lg-3 {
+    -ms-flex-order: 3;
+    order: 3;
+  }
+  .order-lg-4 {
+    -ms-flex-order: 4;
+    order: 4;
+  }
+  .order-lg-5 {
+    -ms-flex-order: 5;
+    order: 5;
+  }
+  .order-lg-6 {
+    -ms-flex-order: 6;
+    order: 6;
+  }
+  .order-lg-7 {
+    -ms-flex-order: 7;
+    order: 7;
+  }
+  .order-lg-8 {
+    -ms-flex-order: 8;
+    order: 8;
+  }
+  .order-lg-9 {
+    -ms-flex-order: 9;
+    order: 9;
+  }
+  .order-lg-10 {
+    -ms-flex-order: 10;
+    order: 10;
+  }
+  .order-lg-11 {
+    -ms-flex-order: 11;
+    order: 11;
+  }
+  .order-lg-12 {
+    -ms-flex-order: 12;
+    order: 12;
+  }
+  .offset-lg-0 {
+    margin-left: 0;
+  }
+  .offset-lg-1 {
+    margin-left: 8.333333%;
+  }
+  .offset-lg-2 {
+    margin-left: 16.666667%;
+  }
+  .offset-lg-3 {
+    margin-left: 25%;
+  }
+  .offset-lg-4 {
+    margin-left: 33.333333%;
+  }
+  .offset-lg-5 {
+    margin-left: 41.666667%;
+  }
+  .offset-lg-6 {
+    margin-left: 50%;
+  }
+  .offset-lg-7 {
+    margin-left: 58.333333%;
+  }
+  .offset-lg-8 {
+    margin-left: 66.666667%;
+  }
+  .offset-lg-9 {
+    margin-left: 75%;
+  }
+  .offset-lg-10 {
+    margin-left: 83.333333%;
+  }
+  .offset-lg-11 {
+    margin-left: 91.666667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl {
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+  .row-cols-xl-1 > * {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-xl-2 > * {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-xl-3 > * {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .row-cols-xl-4 > * {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-xl-5 > * {
+    -ms-flex: 0 0 20%;
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-xl-6 > * {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-xl-auto {
+    -ms-flex: 0 0 auto;
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-xl-1 {
+    -ms-flex: 0 0 8.333333%;
+    flex: 0 0 8.333333%;
+    max-width: 8.333333%;
+  }
+  .col-xl-2 {
+    -ms-flex: 0 0 16.666667%;
+    flex: 0 0 16.666667%;
+    max-width: 16.666667%;
+  }
+  .col-xl-3 {
+    -ms-flex: 0 0 25%;
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-xl-4 {
+    -ms-flex: 0 0 33.333333%;
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+  }
+  .col-xl-5 {
+    -ms-flex: 0 0 41.666667%;
+    flex: 0 0 41.666667%;
+    max-width: 41.666667%;
+  }
+  .col-xl-6 {
+    -ms-flex: 0 0 50%;
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-xl-7 {
+    -ms-flex: 0 0 58.333333%;
+    flex: 0 0 58.333333%;
+    max-width: 58.333333%;
+  }
+  .col-xl-8 {
+    -ms-flex: 0 0 66.666667%;
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+  }
+  .col-xl-9 {
+    -ms-flex: 0 0 75%;
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-xl-10 {
+    -ms-flex: 0 0 83.333333%;
+    flex: 0 0 83.333333%;
+    max-width: 83.333333%;
+  }
+  .col-xl-11 {
+    -ms-flex: 0 0 91.666667%;
+    flex: 0 0 91.666667%;
+    max-width: 91.666667%;
+  }
+  .col-xl-12 {
+    -ms-flex: 0 0 100%;
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-xl-first {
+    -ms-flex-order: -1;
+    order: -1;
+  }
+  .order-xl-last {
+    -ms-flex-order: 13;
+    order: 13;
+  }
+  .order-xl-0 {
+    -ms-flex-order: 0;
+    order: 0;
+  }
+  .order-xl-1 {
+    -ms-flex-order: 1;
+    order: 1;
+  }
+  .order-xl-2 {
+    -ms-flex-order: 2;
+    order: 2;
+  }
+  .order-xl-3 {
+    -ms-flex-order: 3;
+    order: 3;
+  }
+  .order-xl-4 {
+    -ms-flex-order: 4;
+    order: 4;
+  }
+  .order-xl-5 {
+    -ms-flex-order: 5;
+    order: 5;
+  }
+  .order-xl-6 {
+    -ms-flex-order: 6;
+    order: 6;
+  }
+  .order-xl-7 {
+    -ms-flex-order: 7;
+    order: 7;
+  }
+  .order-xl-8 {
+    -ms-flex-order: 8;
+    order: 8;
+  }
+  .order-xl-9 {
+    -ms-flex-order: 9;
+    order: 9;
+  }
+  .order-xl-10 {
+    -ms-flex-order: 10;
+    order: 10;
+  }
+  .order-xl-11 {
+    -ms-flex-order: 11;
+    order: 11;
+  }
+  .order-xl-12 {
+    -ms-flex-order: 12;
+    order: 12;
+  }
+  .offset-xl-0 {
+    margin-left: 0;
+  }
+  .offset-xl-1 {
+    margin-left: 8.333333%;
+  }
+  .offset-xl-2 {
+    margin-left: 16.666667%;
+  }
+  .offset-xl-3 {
+    margin-left: 25%;
+  }
+  .offset-xl-4 {
+    margin-left: 33.333333%;
+  }
+  .offset-xl-5 {
+    margin-left: 41.666667%;
+  }
+  .offset-xl-6 {
+    margin-left: 50%;
+  }
+  .offset-xl-7 {
+    margin-left: 58.333333%;
+  }
+  .offset-xl-8 {
+    margin-left: 66.666667%;
+  }
+  .offset-xl-9 {
+    margin-left: 75%;
+  }
+  .offset-xl-10 {
+    margin-left: 83.333333%;
+  }
+  .offset-xl-11 {
+    margin-left: 91.666667%;
+  }
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-row {
+  display: table-row !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-flex {
+  display: -ms-flexbox !important;
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: -ms-inline-flexbox !important;
+  display: inline-flex !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+  .d-sm-inline {
+    display: inline !important;
+  }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+  .d-sm-block {
+    display: block !important;
+  }
+  .d-sm-table {
+    display: table !important;
+  }
+  .d-sm-table-row {
+    display: table-row !important;
+  }
+  .d-sm-table-cell {
+    display: table-cell !important;
+  }
+  .d-sm-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .d-sm-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+  .d-md-inline {
+    display: inline !important;
+  }
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+  .d-md-block {
+    display: block !important;
+  }
+  .d-md-table {
+    display: table !important;
+  }
+  .d-md-table-row {
+    display: table-row !important;
+  }
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+  .d-md-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .d-md-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-inline {
+    display: inline !important;
+  }
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+  .d-lg-table {
+    display: table !important;
+  }
+  .d-lg-table-row {
+    display: table-row !important;
+  }
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
+  .d-lg-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .d-lg-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-none {
+    display: none !important;
+  }
+  .d-xl-inline {
+    display: inline !important;
+  }
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xl-block {
+    display: block !important;
+  }
+  .d-xl-table {
+    display: table !important;
+  }
+  .d-xl-table-row {
+    display: table-row !important;
+  }
+  .d-xl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xl-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .d-xl-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+@media print {
+  .d-print-none {
+    display: none !important;
+  }
+  .d-print-inline {
+    display: inline !important;
+  }
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+  .d-print-block {
+    display: block !important;
+  }
+  .d-print-table {
+    display: table !important;
+  }
+  .d-print-table-row {
+    display: table-row !important;
+  }
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+  .d-print-flex {
+    display: -ms-flexbox !important;
+    display: flex !important;
+  }
+  .d-print-inline-flex {
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  }
+}
+
+.flex-row {
+  -ms-flex-direction: row !important;
+  flex-direction: row !important;
+}
+
+.flex-column {
+  -ms-flex-direction: column !important;
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  -ms-flex-direction: row-reverse !important;
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  -ms-flex-direction: column-reverse !important;
+  flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+  -ms-flex-wrap: wrap !important;
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  -ms-flex-wrap: nowrap !important;
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  -ms-flex-wrap: wrap-reverse !important;
+  flex-wrap: wrap-reverse !important;
+}
+
+.flex-fill {
+  -ms-flex: 1 1 auto !important;
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  -ms-flex-positive: 0 !important;
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  -ms-flex-positive: 1 !important;
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  -ms-flex-negative: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  -ms-flex-negative: 1 !important;
+  flex-shrink: 1 !important;
+}
+
+.justify-content-start {
+  -ms-flex-pack: start !important;
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  -ms-flex-pack: end !important;
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  -ms-flex-pack: justify !important;
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  -ms-flex-pack: distribute !important;
+  justify-content: space-around !important;
+}
+
+.align-items-start {
+  -ms-flex-align: start !important;
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  -ms-flex-align: end !important;
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  -ms-flex-align: center !important;
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  -ms-flex-align: baseline !important;
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  -ms-flex-align: stretch !important;
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  -ms-flex-line-pack: start !important;
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  -ms-flex-line-pack: end !important;
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  -ms-flex-line-pack: center !important;
+  align-content: center !important;
+}
+
+.align-content-between {
+  -ms-flex-line-pack: justify !important;
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  -ms-flex-line-pack: distribute !important;
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  -ms-flex-line-pack: stretch !important;
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  -ms-flex-item-align: auto !important;
+  align-self: auto !important;
+}
+
+.align-self-start {
+  -ms-flex-item-align: start !important;
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  -ms-flex-item-align: end !important;
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  -ms-flex-item-align: center !important;
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  -ms-flex-item-align: baseline !important;
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  -ms-flex-item-align: stretch !important;
+  align-self: stretch !important;
+}
+
+@media (min-width: 576px) {
+  .flex-sm-row {
+    -ms-flex-direction: row !important;
+    flex-direction: row !important;
+  }
+  .flex-sm-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+  }
+  .flex-sm-row-reverse {
+    -ms-flex-direction: row-reverse !important;
+    flex-direction: row-reverse !important;
+  }
+  .flex-sm-column-reverse {
+    -ms-flex-direction: column-reverse !important;
+    flex-direction: column-reverse !important;
+  }
+  .flex-sm-wrap {
+    -ms-flex-wrap: wrap !important;
+    flex-wrap: wrap !important;
+  }
+  .flex-sm-nowrap {
+    -ms-flex-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  .flex-sm-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-sm-fill {
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+  }
+  .flex-sm-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-sm-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-sm-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-sm-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
+  .justify-content-sm-start {
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+  }
+  .justify-content-sm-end {
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+  }
+  .justify-content-sm-center {
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+  }
+  .justify-content-sm-between {
+    -ms-flex-pack: justify !important;
+    justify-content: space-between !important;
+  }
+  .justify-content-sm-around {
+    -ms-flex-pack: distribute !important;
+    justify-content: space-around !important;
+  }
+  .align-items-sm-start {
+    -ms-flex-align: start !important;
+    align-items: flex-start !important;
+  }
+  .align-items-sm-end {
+    -ms-flex-align: end !important;
+    align-items: flex-end !important;
+  }
+  .align-items-sm-center {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+  .align-items-sm-baseline {
+    -ms-flex-align: baseline !important;
+    align-items: baseline !important;
+  }
+  .align-items-sm-stretch {
+    -ms-flex-align: stretch !important;
+    align-items: stretch !important;
+  }
+  .align-content-sm-start {
+    -ms-flex-line-pack: start !important;
+    align-content: flex-start !important;
+  }
+  .align-content-sm-end {
+    -ms-flex-line-pack: end !important;
+    align-content: flex-end !important;
+  }
+  .align-content-sm-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+  }
+  .align-content-sm-between {
+    -ms-flex-line-pack: justify !important;
+    align-content: space-between !important;
+  }
+  .align-content-sm-around {
+    -ms-flex-line-pack: distribute !important;
+    align-content: space-around !important;
+  }
+  .align-content-sm-stretch {
+    -ms-flex-line-pack: stretch !important;
+    align-content: stretch !important;
+  }
+  .align-self-sm-auto {
+    -ms-flex-item-align: auto !important;
+    align-self: auto !important;
+  }
+  .align-self-sm-start {
+    -ms-flex-item-align: start !important;
+    align-self: flex-start !important;
+  }
+  .align-self-sm-end {
+    -ms-flex-item-align: end !important;
+    align-self: flex-end !important;
+  }
+  .align-self-sm-center {
+    -ms-flex-item-align: center !important;
+    align-self: center !important;
+  }
+  .align-self-sm-baseline {
+    -ms-flex-item-align: baseline !important;
+    align-self: baseline !important;
+  }
+  .align-self-sm-stretch {
+    -ms-flex-item-align: stretch !important;
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .flex-md-row {
+    -ms-flex-direction: row !important;
+    flex-direction: row !important;
+  }
+  .flex-md-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+  }
+  .flex-md-row-reverse {
+    -ms-flex-direction: row-reverse !important;
+    flex-direction: row-reverse !important;
+  }
+  .flex-md-column-reverse {
+    -ms-flex-direction: column-reverse !important;
+    flex-direction: column-reverse !important;
+  }
+  .flex-md-wrap {
+    -ms-flex-wrap: wrap !important;
+    flex-wrap: wrap !important;
+  }
+  .flex-md-nowrap {
+    -ms-flex-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  .flex-md-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-md-fill {
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+  }
+  .flex-md-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-md-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-md-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-md-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
+  .justify-content-md-start {
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+  }
+  .justify-content-md-end {
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+  }
+  .justify-content-md-center {
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+  }
+  .justify-content-md-between {
+    -ms-flex-pack: justify !important;
+    justify-content: space-between !important;
+  }
+  .justify-content-md-around {
+    -ms-flex-pack: distribute !important;
+    justify-content: space-around !important;
+  }
+  .align-items-md-start {
+    -ms-flex-align: start !important;
+    align-items: flex-start !important;
+  }
+  .align-items-md-end {
+    -ms-flex-align: end !important;
+    align-items: flex-end !important;
+  }
+  .align-items-md-center {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+  .align-items-md-baseline {
+    -ms-flex-align: baseline !important;
+    align-items: baseline !important;
+  }
+  .align-items-md-stretch {
+    -ms-flex-align: stretch !important;
+    align-items: stretch !important;
+  }
+  .align-content-md-start {
+    -ms-flex-line-pack: start !important;
+    align-content: flex-start !important;
+  }
+  .align-content-md-end {
+    -ms-flex-line-pack: end !important;
+    align-content: flex-end !important;
+  }
+  .align-content-md-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+  }
+  .align-content-md-between {
+    -ms-flex-line-pack: justify !important;
+    align-content: space-between !important;
+  }
+  .align-content-md-around {
+    -ms-flex-line-pack: distribute !important;
+    align-content: space-around !important;
+  }
+  .align-content-md-stretch {
+    -ms-flex-line-pack: stretch !important;
+    align-content: stretch !important;
+  }
+  .align-self-md-auto {
+    -ms-flex-item-align: auto !important;
+    align-self: auto !important;
+  }
+  .align-self-md-start {
+    -ms-flex-item-align: start !important;
+    align-self: flex-start !important;
+  }
+  .align-self-md-end {
+    -ms-flex-item-align: end !important;
+    align-self: flex-end !important;
+  }
+  .align-self-md-center {
+    -ms-flex-item-align: center !important;
+    align-self: center !important;
+  }
+  .align-self-md-baseline {
+    -ms-flex-item-align: baseline !important;
+    align-self: baseline !important;
+  }
+  .align-self-md-stretch {
+    -ms-flex-item-align: stretch !important;
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .flex-lg-row {
+    -ms-flex-direction: row !important;
+    flex-direction: row !important;
+  }
+  .flex-lg-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+  }
+  .flex-lg-row-reverse {
+    -ms-flex-direction: row-reverse !important;
+    flex-direction: row-reverse !important;
+  }
+  .flex-lg-column-reverse {
+    -ms-flex-direction: column-reverse !important;
+    flex-direction: column-reverse !important;
+  }
+  .flex-lg-wrap {
+    -ms-flex-wrap: wrap !important;
+    flex-wrap: wrap !important;
+  }
+  .flex-lg-nowrap {
+    -ms-flex-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  .flex-lg-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-lg-fill {
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+  }
+  .flex-lg-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-lg-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-lg-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-lg-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
+  .justify-content-lg-start {
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+  }
+  .justify-content-lg-end {
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+  }
+  .justify-content-lg-center {
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+  }
+  .justify-content-lg-between {
+    -ms-flex-pack: justify !important;
+    justify-content: space-between !important;
+  }
+  .justify-content-lg-around {
+    -ms-flex-pack: distribute !important;
+    justify-content: space-around !important;
+  }
+  .align-items-lg-start {
+    -ms-flex-align: start !important;
+    align-items: flex-start !important;
+  }
+  .align-items-lg-end {
+    -ms-flex-align: end !important;
+    align-items: flex-end !important;
+  }
+  .align-items-lg-center {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+  .align-items-lg-baseline {
+    -ms-flex-align: baseline !important;
+    align-items: baseline !important;
+  }
+  .align-items-lg-stretch {
+    -ms-flex-align: stretch !important;
+    align-items: stretch !important;
+  }
+  .align-content-lg-start {
+    -ms-flex-line-pack: start !important;
+    align-content: flex-start !important;
+  }
+  .align-content-lg-end {
+    -ms-flex-line-pack: end !important;
+    align-content: flex-end !important;
+  }
+  .align-content-lg-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+  }
+  .align-content-lg-between {
+    -ms-flex-line-pack: justify !important;
+    align-content: space-between !important;
+  }
+  .align-content-lg-around {
+    -ms-flex-line-pack: distribute !important;
+    align-content: space-around !important;
+  }
+  .align-content-lg-stretch {
+    -ms-flex-line-pack: stretch !important;
+    align-content: stretch !important;
+  }
+  .align-self-lg-auto {
+    -ms-flex-item-align: auto !important;
+    align-self: auto !important;
+  }
+  .align-self-lg-start {
+    -ms-flex-item-align: start !important;
+    align-self: flex-start !important;
+  }
+  .align-self-lg-end {
+    -ms-flex-item-align: end !important;
+    align-self: flex-end !important;
+  }
+  .align-self-lg-center {
+    -ms-flex-item-align: center !important;
+    align-self: center !important;
+  }
+  .align-self-lg-baseline {
+    -ms-flex-item-align: baseline !important;
+    align-self: baseline !important;
+  }
+  .align-self-lg-stretch {
+    -ms-flex-item-align: stretch !important;
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .flex-xl-row {
+    -ms-flex-direction: row !important;
+    flex-direction: row !important;
+  }
+  .flex-xl-column {
+    -ms-flex-direction: column !important;
+    flex-direction: column !important;
+  }
+  .flex-xl-row-reverse {
+    -ms-flex-direction: row-reverse !important;
+    flex-direction: row-reverse !important;
+  }
+  .flex-xl-column-reverse {
+    -ms-flex-direction: column-reverse !important;
+    flex-direction: column-reverse !important;
+  }
+  .flex-xl-wrap {
+    -ms-flex-wrap: wrap !important;
+    flex-wrap: wrap !important;
+  }
+  .flex-xl-nowrap {
+    -ms-flex-wrap: nowrap !important;
+    flex-wrap: nowrap !important;
+  }
+  .flex-xl-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse !important;
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-xl-fill {
+    -ms-flex: 1 1 auto !important;
+    flex: 1 1 auto !important;
+  }
+  .flex-xl-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-xl-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-xl-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-xl-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
+  .justify-content-xl-start {
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+  }
+  .justify-content-xl-end {
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+  }
+  .justify-content-xl-center {
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+  }
+  .justify-content-xl-between {
+    -ms-flex-pack: justify !important;
+    justify-content: space-between !important;
+  }
+  .justify-content-xl-around {
+    -ms-flex-pack: distribute !important;
+    justify-content: space-around !important;
+  }
+  .align-items-xl-start {
+    -ms-flex-align: start !important;
+    align-items: flex-start !important;
+  }
+  .align-items-xl-end {
+    -ms-flex-align: end !important;
+    align-items: flex-end !important;
+  }
+  .align-items-xl-center {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+  .align-items-xl-baseline {
+    -ms-flex-align: baseline !important;
+    align-items: baseline !important;
+  }
+  .align-items-xl-stretch {
+    -ms-flex-align: stretch !important;
+    align-items: stretch !important;
+  }
+  .align-content-xl-start {
+    -ms-flex-line-pack: start !important;
+    align-content: flex-start !important;
+  }
+  .align-content-xl-end {
+    -ms-flex-line-pack: end !important;
+    align-content: flex-end !important;
+  }
+  .align-content-xl-center {
+    -ms-flex-line-pack: center !important;
+    align-content: center !important;
+  }
+  .align-content-xl-between {
+    -ms-flex-line-pack: justify !important;
+    align-content: space-between !important;
+  }
+  .align-content-xl-around {
+    -ms-flex-line-pack: distribute !important;
+    align-content: space-around !important;
+  }
+  .align-content-xl-stretch {
+    -ms-flex-line-pack: stretch !important;
+    align-content: stretch !important;
+  }
+  .align-self-xl-auto {
+    -ms-flex-item-align: auto !important;
+    align-self: auto !important;
+  }
+  .align-self-xl-start {
+    -ms-flex-item-align: start !important;
+    align-self: flex-start !important;
+  }
+  .align-self-xl-end {
+    -ms-flex-item-align: end !important;
+    align-self: flex-end !important;
+  }
+  .align-self-xl-center {
+    -ms-flex-item-align: center !important;
+    align-self: center !important;
+  }
+  .align-self-xl-baseline {
+    -ms-flex-item-align: baseline !important;
+    align-self: baseline !important;
+  }
+  .align-self-xl-stretch {
+    -ms-flex-item-align: stretch !important;
+    align-self: stretch !important;
+  }
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0,
+.my-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0,
+.mx-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0,
+.my-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0,
+.mx-0 {
+  margin-left: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.mt-1,
+.my-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1,
+.mx-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1,
+.my-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-1,
+.mx-1 {
+  margin-left: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.mt-2,
+.my-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2,
+.mx-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2,
+.my-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-2,
+.mx-2 {
+  margin-left: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.mt-3,
+.my-3 {
+  margin-top: 1rem !important;
+}
+
+.mr-3,
+.mx-3 {
+  margin-right: 1rem !important;
+}
+
+.mb-3,
+.my-3 {
+  margin-bottom: 1rem !important;
+}
+
+.ml-3,
+.mx-3 {
+  margin-left: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.mt-4,
+.my-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-4,
+.mx-4 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-4,
+.mx-4 {
+  margin-left: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.mr-5,
+.mx-5 {
+  margin-right: 3rem !important;
+}
+
+.mb-5,
+.my-5 {
+  margin-bottom: 3rem !important;
+}
+
+.ml-5,
+.mx-5 {
+  margin-left: 3rem !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0,
+.py-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0,
+.px-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0,
+.py-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0,
+.px-0 {
+  padding-left: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.pt-1,
+.py-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pr-1,
+.px-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pb-1,
+.py-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-1,
+.px-1 {
+  padding-left: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.pt-2,
+.py-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pr-2,
+.px-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pb-2,
+.py-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-2,
+.px-2 {
+  padding-left: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 1rem !important;
+}
+
+.pt-3,
+.py-3 {
+  padding-top: 1rem !important;
+}
+
+.pr-3,
+.px-3 {
+  padding-right: 1rem !important;
+}
+
+.pb-3,
+.py-3 {
+  padding-bottom: 1rem !important;
+}
+
+.pl-3,
+.px-3 {
+  padding-left: 1rem !important;
+}
+
+.p-4 {
+  padding: 1.5rem !important;
+}
+
+.pt-4,
+.py-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pr-4,
+.px-4 {
+  padding-right: 1.5rem !important;
+}
+
+.pb-4,
+.py-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-4,
+.px-4 {
+  padding-left: 1.5rem !important;
+}
+
+.p-5 {
+  padding: 3rem !important;
+}
+
+.pt-5,
+.py-5 {
+  padding-top: 3rem !important;
+}
+
+.pr-5,
+.px-5 {
+  padding-right: 3rem !important;
+}
+
+.pb-5,
+.py-5 {
+  padding-bottom: 3rem !important;
+}
+
+.pl-5,
+.px-5 {
+  padding-left: 3rem !important;
+}
+
+.m-n1 {
+  margin: -0.25rem !important;
+}
+
+.mt-n1,
+.my-n1 {
+  margin-top: -0.25rem !important;
+}
+
+.mr-n1,
+.mx-n1 {
+  margin-right: -0.25rem !important;
+}
+
+.mb-n1,
+.my-n1 {
+  margin-bottom: -0.25rem !important;
+}
+
+.ml-n1,
+.mx-n1 {
+  margin-left: -0.25rem !important;
+}
+
+.m-n2 {
+  margin: -0.5rem !important;
+}
+
+.mt-n2,
+.my-n2 {
+  margin-top: -0.5rem !important;
+}
+
+.mr-n2,
+.mx-n2 {
+  margin-right: -0.5rem !important;
+}
+
+.mb-n2,
+.my-n2 {
+  margin-bottom: -0.5rem !important;
+}
+
+.ml-n2,
+.mx-n2 {
+  margin-left: -0.5rem !important;
+}
+
+.m-n3 {
+  margin: -1rem !important;
+}
+
+.mt-n3,
+.my-n3 {
+  margin-top: -1rem !important;
+}
+
+.mr-n3,
+.mx-n3 {
+  margin-right: -1rem !important;
+}
+
+.mb-n3,
+.my-n3 {
+  margin-bottom: -1rem !important;
+}
+
+.ml-n3,
+.mx-n3 {
+  margin-left: -1rem !important;
+}
+
+.m-n4 {
+  margin: -1.5rem !important;
+}
+
+.mt-n4,
+.my-n4 {
+  margin-top: -1.5rem !important;
+}
+
+.mr-n4,
+.mx-n4 {
+  margin-right: -1.5rem !important;
+}
+
+.mb-n4,
+.my-n4 {
+  margin-bottom: -1.5rem !important;
+}
+
+.ml-n4,
+.mx-n4 {
+  margin-left: -1.5rem !important;
+}
+
+.m-n5 {
+  margin: -3rem !important;
+}
+
+.mt-n5,
+.my-n5 {
+  margin-top: -3rem !important;
+}
+
+.mr-n5,
+.mx-n5 {
+  margin-right: -3rem !important;
+}
+
+.mb-n5,
+.my-n5 {
+  margin-bottom: -3rem !important;
+}
+
+.ml-n5,
+.mx-n5 {
+  margin-left: -3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto,
+.my-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto,
+.my-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}
+
+@media (min-width: 576px) {
+  .m-sm-0 {
+    margin: 0 !important;
+  }
+  .mt-sm-0,
+  .my-sm-0 {
+    margin-top: 0 !important;
+  }
+  .mr-sm-0,
+  .mx-sm-0 {
+    margin-right: 0 !important;
+  }
+  .mb-sm-0,
+  .my-sm-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-sm-0,
+  .mx-sm-0 {
+    margin-left: 0 !important;
+  }
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-sm-1,
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-sm-1,
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-sm-1,
+  .my-sm-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-sm-1,
+  .mx-sm-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-sm-2,
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-sm-2,
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-sm-2,
+  .my-sm-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-sm-2,
+  .mx-sm-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
+  .mt-sm-3,
+  .my-sm-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-sm-3,
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-sm-3,
+  .my-sm-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-sm-3,
+  .mx-sm-3 {
+    margin-left: 1rem !important;
+  }
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-sm-4,
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-sm-4,
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-sm-4,
+  .my-sm-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-sm-4,
+  .mx-sm-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
+  .mt-sm-5,
+  .my-sm-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-sm-5,
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-sm-5,
+  .my-sm-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-sm-5,
+  .mx-sm-5 {
+    margin-left: 3rem !important;
+  }
+  .p-sm-0 {
+    padding: 0 !important;
+  }
+  .pt-sm-0,
+  .py-sm-0 {
+    padding-top: 0 !important;
+  }
+  .pr-sm-0,
+  .px-sm-0 {
+    padding-right: 0 !important;
+  }
+  .pb-sm-0,
+  .py-sm-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-sm-0,
+  .px-sm-0 {
+    padding-left: 0 !important;
+  }
+  .p-sm-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-sm-1,
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-sm-1,
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-sm-1,
+  .py-sm-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-sm-1,
+  .px-sm-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-sm-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-sm-2,
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-sm-2,
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-sm-2,
+  .py-sm-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-sm-2,
+  .px-sm-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-sm-3 {
+    padding: 1rem !important;
+  }
+  .pt-sm-3,
+  .py-sm-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-sm-3,
+  .px-sm-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-sm-3,
+  .py-sm-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-sm-3,
+  .px-sm-3 {
+    padding-left: 1rem !important;
+  }
+  .p-sm-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-sm-4,
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-sm-4,
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-sm-4,
+  .py-sm-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-sm-4,
+  .px-sm-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-sm-5 {
+    padding: 3rem !important;
+  }
+  .pt-sm-5,
+  .py-sm-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-sm-5,
+  .px-sm-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-sm-5,
+  .py-sm-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-sm-5,
+  .px-sm-5 {
+    padding-left: 3rem !important;
+  }
+  .m-sm-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-sm-n1,
+  .my-sm-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-sm-n1,
+  .mx-sm-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-sm-n1,
+  .my-sm-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-sm-n1,
+  .mx-sm-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-sm-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-sm-n2,
+  .my-sm-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-sm-n2,
+  .mx-sm-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-sm-n2,
+  .my-sm-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-sm-n2,
+  .mx-sm-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-sm-n3 {
+    margin: -1rem !important;
+  }
+  .mt-sm-n3,
+  .my-sm-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-sm-n3,
+  .mx-sm-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-sm-n3,
+  .my-sm-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-sm-n3,
+  .mx-sm-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-sm-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-sm-n4,
+  .my-sm-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-sm-n4,
+  .mx-sm-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-sm-n4,
+  .my-sm-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-sm-n4,
+  .mx-sm-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-sm-n5 {
+    margin: -3rem !important;
+  }
+  .mt-sm-n5,
+  .my-sm-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-sm-n5,
+  .mx-sm-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-sm-n5,
+  .my-sm-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-sm-n5,
+  .mx-sm-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-sm-auto {
+    margin: auto !important;
+  }
+  .mt-sm-auto,
+  .my-sm-auto {
+    margin-top: auto !important;
+  }
+  .mr-sm-auto,
+  .mx-sm-auto {
+    margin-right: auto !important;
+  }
+  .mb-sm-auto,
+  .my-sm-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-sm-auto,
+  .mx-sm-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .m-md-0 {
+    margin: 0 !important;
+  }
+  .mt-md-0,
+  .my-md-0 {
+    margin-top: 0 !important;
+  }
+  .mr-md-0,
+  .mx-md-0 {
+    margin-right: 0 !important;
+  }
+  .mb-md-0,
+  .my-md-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-md-0,
+  .mx-md-0 {
+    margin-left: 0 !important;
+  }
+  .m-md-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-md-1,
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-md-1,
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-md-1,
+  .my-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-md-1,
+  .mx-md-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-md-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-md-2,
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-md-2,
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-md-2,
+  .my-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-md-2,
+  .mx-md-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-md-3 {
+    margin: 1rem !important;
+  }
+  .mt-md-3,
+  .my-md-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-md-3,
+  .mx-md-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-md-3,
+  .my-md-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-md-3,
+  .mx-md-3 {
+    margin-left: 1rem !important;
+  }
+  .m-md-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-md-4,
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-md-4,
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-md-4,
+  .my-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-md-4,
+  .mx-md-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-md-5 {
+    margin: 3rem !important;
+  }
+  .mt-md-5,
+  .my-md-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-md-5,
+  .mx-md-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-md-5,
+  .my-md-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-md-5,
+  .mx-md-5 {
+    margin-left: 3rem !important;
+  }
+  .p-md-0 {
+    padding: 0 !important;
+  }
+  .pt-md-0,
+  .py-md-0 {
+    padding-top: 0 !important;
+  }
+  .pr-md-0,
+  .px-md-0 {
+    padding-right: 0 !important;
+  }
+  .pb-md-0,
+  .py-md-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-md-0,
+  .px-md-0 {
+    padding-left: 0 !important;
+  }
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-md-1,
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-md-1,
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-md-1,
+  .py-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-md-1,
+  .px-md-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-md-2,
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-md-2,
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-md-2,
+  .py-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-md-2,
+  .px-md-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-md-3 {
+    padding: 1rem !important;
+  }
+  .pt-md-3,
+  .py-md-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-md-3,
+  .px-md-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-md-3,
+  .py-md-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-md-3,
+  .px-md-3 {
+    padding-left: 1rem !important;
+  }
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-md-4,
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-md-4,
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-md-4,
+  .py-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-md-4,
+  .px-md-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-md-5 {
+    padding: 3rem !important;
+  }
+  .pt-md-5,
+  .py-md-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-md-5,
+  .px-md-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-md-5,
+  .py-md-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-md-5,
+  .px-md-5 {
+    padding-left: 3rem !important;
+  }
+  .m-md-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-md-n1,
+  .my-md-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-md-n1,
+  .mx-md-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-md-n1,
+  .my-md-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-md-n1,
+  .mx-md-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-md-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-md-n2,
+  .my-md-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-md-n2,
+  .mx-md-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-md-n2,
+  .my-md-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-md-n2,
+  .mx-md-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-md-n3 {
+    margin: -1rem !important;
+  }
+  .mt-md-n3,
+  .my-md-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-md-n3,
+  .mx-md-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-md-n3,
+  .my-md-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-md-n3,
+  .mx-md-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-md-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-md-n4,
+  .my-md-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-md-n4,
+  .mx-md-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-md-n4,
+  .my-md-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-md-n4,
+  .mx-md-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-md-n5 {
+    margin: -3rem !important;
+  }
+  .mt-md-n5,
+  .my-md-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-md-n5,
+  .mx-md-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-md-n5,
+  .my-md-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-md-n5,
+  .mx-md-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-md-auto {
+    margin: auto !important;
+  }
+  .mt-md-auto,
+  .my-md-auto {
+    margin-top: auto !important;
+  }
+  .mr-md-auto,
+  .mx-md-auto {
+    margin-right: auto !important;
+  }
+  .mb-md-auto,
+  .my-md-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-md-auto,
+  .mx-md-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .m-lg-0 {
+    margin: 0 !important;
+  }
+  .mt-lg-0,
+  .my-lg-0 {
+    margin-top: 0 !important;
+  }
+  .mr-lg-0,
+  .mx-lg-0 {
+    margin-right: 0 !important;
+  }
+  .mb-lg-0,
+  .my-lg-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-lg-0,
+  .mx-lg-0 {
+    margin-left: 0 !important;
+  }
+  .m-lg-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-lg-1,
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-lg-1,
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-lg-1,
+  .my-lg-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-lg-1,
+  .mx-lg-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-lg-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-lg-2,
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-lg-2,
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-lg-2,
+  .my-lg-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-lg-2,
+  .mx-lg-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-lg-3 {
+    margin: 1rem !important;
+  }
+  .mt-lg-3,
+  .my-lg-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-lg-3,
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-lg-3,
+  .my-lg-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-lg-3,
+  .mx-lg-3 {
+    margin-left: 1rem !important;
+  }
+  .m-lg-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-lg-4,
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-lg-4,
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-lg-4,
+  .my-lg-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-lg-4,
+  .mx-lg-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-lg-5 {
+    margin: 3rem !important;
+  }
+  .mt-lg-5,
+  .my-lg-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-lg-5,
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-lg-5,
+  .my-lg-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-lg-5,
+  .mx-lg-5 {
+    margin-left: 3rem !important;
+  }
+  .p-lg-0 {
+    padding: 0 !important;
+  }
+  .pt-lg-0,
+  .py-lg-0 {
+    padding-top: 0 !important;
+  }
+  .pr-lg-0,
+  .px-lg-0 {
+    padding-right: 0 !important;
+  }
+  .pb-lg-0,
+  .py-lg-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-lg-0,
+  .px-lg-0 {
+    padding-left: 0 !important;
+  }
+  .p-lg-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-lg-1,
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-lg-1,
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-lg-1,
+  .py-lg-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-lg-1,
+  .px-lg-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-lg-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-lg-2,
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-lg-2,
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-lg-2,
+  .py-lg-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-lg-2,
+  .px-lg-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-lg-3 {
+    padding: 1rem !important;
+  }
+  .pt-lg-3,
+  .py-lg-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-lg-3,
+  .px-lg-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-lg-3,
+  .py-lg-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-lg-3,
+  .px-lg-3 {
+    padding-left: 1rem !important;
+  }
+  .p-lg-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-lg-4,
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-lg-4,
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-lg-4,
+  .py-lg-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-lg-4,
+  .px-lg-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-lg-5 {
+    padding: 3rem !important;
+  }
+  .pt-lg-5,
+  .py-lg-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-lg-5,
+  .px-lg-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-lg-5,
+  .py-lg-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-lg-5,
+  .px-lg-5 {
+    padding-left: 3rem !important;
+  }
+  .m-lg-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-lg-n1,
+  .my-lg-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-lg-n1,
+  .mx-lg-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-lg-n1,
+  .my-lg-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-lg-n1,
+  .mx-lg-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-lg-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-lg-n2,
+  .my-lg-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-lg-n2,
+  .mx-lg-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-lg-n2,
+  .my-lg-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-lg-n2,
+  .mx-lg-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-lg-n3 {
+    margin: -1rem !important;
+  }
+  .mt-lg-n3,
+  .my-lg-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-lg-n3,
+  .mx-lg-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-lg-n3,
+  .my-lg-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-lg-n3,
+  .mx-lg-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-lg-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-lg-n4,
+  .my-lg-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-lg-n4,
+  .mx-lg-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-lg-n4,
+  .my-lg-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-lg-n4,
+  .mx-lg-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-lg-n5 {
+    margin: -3rem !important;
+  }
+  .mt-lg-n5,
+  .my-lg-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-lg-n5,
+  .mx-lg-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-lg-n5,
+  .my-lg-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-lg-n5,
+  .mx-lg-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-lg-auto {
+    margin: auto !important;
+  }
+  .mt-lg-auto,
+  .my-lg-auto {
+    margin-top: auto !important;
+  }
+  .mr-lg-auto,
+  .mx-lg-auto {
+    margin-right: auto !important;
+  }
+  .mb-lg-auto,
+  .my-lg-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-lg-auto,
+  .mx-lg-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .m-xl-0 {
+    margin: 0 !important;
+  }
+  .mt-xl-0,
+  .my-xl-0 {
+    margin-top: 0 !important;
+  }
+  .mr-xl-0,
+  .mx-xl-0 {
+    margin-right: 0 !important;
+  }
+  .mb-xl-0,
+  .my-xl-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-xl-0,
+  .mx-xl-0 {
+    margin-left: 0 !important;
+  }
+  .m-xl-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-xl-1,
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-xl-1,
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-xl-1,
+  .my-xl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-xl-1,
+  .mx-xl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-xl-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-xl-2,
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-xl-2,
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-xl-2,
+  .my-xl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-xl-2,
+  .mx-xl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-xl-3 {
+    margin: 1rem !important;
+  }
+  .mt-xl-3,
+  .my-xl-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-xl-3,
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-xl-3,
+  .my-xl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-xl-3,
+  .mx-xl-3 {
+    margin-left: 1rem !important;
+  }
+  .m-xl-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-xl-4,
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-xl-4,
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-xl-4,
+  .my-xl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-xl-4,
+  .mx-xl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-xl-5 {
+    margin: 3rem !important;
+  }
+  .mt-xl-5,
+  .my-xl-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-xl-5,
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-xl-5,
+  .my-xl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-xl-5,
+  .mx-xl-5 {
+    margin-left: 3rem !important;
+  }
+  .p-xl-0 {
+    padding: 0 !important;
+  }
+  .pt-xl-0,
+  .py-xl-0 {
+    padding-top: 0 !important;
+  }
+  .pr-xl-0,
+  .px-xl-0 {
+    padding-right: 0 !important;
+  }
+  .pb-xl-0,
+  .py-xl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-xl-0,
+  .px-xl-0 {
+    padding-left: 0 !important;
+  }
+  .p-xl-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-xl-1,
+  .py-xl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-xl-1,
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-xl-1,
+  .py-xl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-xl-1,
+  .px-xl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-xl-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-xl-2,
+  .py-xl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-xl-2,
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-xl-2,
+  .py-xl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-xl-2,
+  .px-xl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-xl-3 {
+    padding: 1rem !important;
+  }
+  .pt-xl-3,
+  .py-xl-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-xl-3,
+  .px-xl-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-xl-3,
+  .py-xl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-xl-3,
+  .px-xl-3 {
+    padding-left: 1rem !important;
+  }
+  .p-xl-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-xl-4,
+  .py-xl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-xl-4,
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-xl-4,
+  .py-xl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-xl-4,
+  .px-xl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+  .pt-xl-5,
+  .py-xl-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-xl-5,
+  .px-xl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xl-5,
+  .py-xl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-xl-5,
+  .px-xl-5 {
+    padding-left: 3rem !important;
+  }
+  .m-xl-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-xl-n1,
+  .my-xl-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-xl-n1,
+  .mx-xl-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-xl-n1,
+  .my-xl-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-xl-n1,
+  .mx-xl-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-xl-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-xl-n2,
+  .my-xl-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-xl-n2,
+  .mx-xl-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-xl-n2,
+  .my-xl-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-xl-n2,
+  .mx-xl-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-xl-n3 {
+    margin: -1rem !important;
+  }
+  .mt-xl-n3,
+  .my-xl-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-xl-n3,
+  .mx-xl-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-xl-n3,
+  .my-xl-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-xl-n3,
+  .mx-xl-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-xl-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-xl-n4,
+  .my-xl-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-xl-n4,
+  .mx-xl-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-xl-n4,
+  .my-xl-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-xl-n4,
+  .mx-xl-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-xl-n5 {
+    margin: -3rem !important;
+  }
+  .mt-xl-n5,
+  .my-xl-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-xl-n5,
+  .mx-xl-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-xl-n5,
+  .my-xl-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-xl-n5,
+  .mx-xl-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-xl-auto {
+    margin: auto !important;
+  }
+  .mt-xl-auto,
+  .my-xl-auto {
+    margin-top: auto !important;
+  }
+  .mr-xl-auto,
+  .mx-xl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xl-auto,
+  .my-xl-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-xl-auto,
+  .mx-xl-auto {
+    margin-left: auto !important;
+  }
+}
+/*# sourceMappingURL=bootstrap-grid.css.map */
diff --git a/static-site/app/styles/browserCompatability.css b/static-site/app/styles/browserCompatability.css
new file mode 100644
index 000000000..74bcadd0b
--- /dev/null
+++ b/static-site/app/styles/browserCompatability.css
@@ -0,0 +1,446 @@
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=6b86ca18d196601f4dc3dca9dfd88c2f)
+ * Config saved to config.json and https://gist.github.com/6b86ca18d196601f4dc3dca9dfd88c2f
+ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+figure {
+  margin: 0;
+}
+img {
+  vertical-align: middle;
+}
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.img-rounded {
+  border-radius: 6px;
+}
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+.img-circle {
+  border-radius: 50%;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
+[role="button"] {
+  cursor: pointer;
+}
diff --git a/static-site/app/styles/globals.css b/static-site/app/styles/globals.css
new file mode 100644
index 000000000..950fd5289
--- /dev/null
+++ b/static-site/app/styles/globals.css
@@ -0,0 +1,137 @@
+/* for debugging: add a border to all other elements on the page */
+/* body * { border: 1px solid red; } */
+
+:root {
+  --titleColor0: #4377cd; /* N */
+  --titleColor1: #5097ba; /* E */
+  --titleColor2: #63ac9a; /* X */
+  --titleColor3: #7cb879; /* T */
+  --titleColor4: #9abe5c; /* S */
+  --titleColor5: #b9bc4a; /* T */
+  --titleColor6: #d4b13f; /* R */
+  --titleColor7: #e49938; /* A */
+  --titleColor8: #e67030; /* I */
+  --titleColor9: #de3c26; /* N */
+
+  --blue: #5097ba;
+  --darkGrey: #333;
+  --mediumGrey: #888;
+  --lightGrey: #ccc;
+
+  --niceLineHeight: 1.6;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  /* We use nextjs' next/font to manage our primary font (Lato). `var(--lato)` is defined in app/layout.tsx */
+  font-family: var(--lato), "Helvetica Neue", sans-serif;
+  font-weight: 300;
+}
+
+html {
+  font-size: 62.5%;
+  margin: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* these rules are a tweaked version of what's in bootstrap */
+@media (min-width: 768px) {
+  html {
+    max-width: 728px;
+  }
+}
+@media (min-width: 992px) {
+  html {
+    max-width: 952px;
+  }
+}
+@media (min-width: 1200px) {
+  html {
+    max-width: 1150px;
+  }
+}
+@media (min-width: 1550px) {
+  html {
+    max-width: 1500px;
+  }
+}
+
+main {
+  padding: 0 25px;
+}
+
+a {
+  background-color: transparent;
+  color: var(--blue);
+  font-weight: 500;
+  text-decoration: none;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+a:hover,
+a:focus {
+  text-decoration: underline;
+}
+a:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+h1 {
+  color: var(--darkGrey);
+  font-size: 38px;
+  font-weight: 300;
+  line-height: 32px;
+  margin-bottom: 0px;
+  margin-top: 0px;
+  min-width: 240px;
+  text-align: center;
+}
+
+h2 {
+  font-size: 2.5rem;
+  font-weight: 500;
+}
+h3 {
+  font-size: 2rem;
+  font-weight: 500;
+}
+h4 {
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+h5 {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+h6 {
+  font-size: 1.6rem;
+  font-weight: 300;
+}
+
+div.iconParagraph {
+  font-size: var(--niceFontSize);
+  font-weight: 300;
+  line-height: 2.5;
+  margin: 0 auto;
+  text-align: center;
+}
+
+p.footerParagraph {
+  color: var(--mediumGrey);
+  font-size: 12px !important;
+  font-weight: 300;
+  line-height: var(--tightLineHight);
+  margin: 20px 0 0;
+  text-align: center;
+}
+
+p.wideParagraph {
+  font-size: 14px !important;
+  font-weight: 300;
+  line-height: var(--tightLineHight);
+  margin: 20px 0 0;
+}
diff --git a/static-site/components/footer/index.tsx b/static-site/components/footer/index.tsx
new file mode 100644
index 000000000..754084a24
--- /dev/null
+++ b/static-site/components/footer/index.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import Logos from "../logos";
+import { BigSpacer, SmallSpacer } from "../spacers";
+
+import SiteMap from "./site-map";
+import TeamList from "./team-list";
+
+export default function Footer(): React.ReactElement {
+  return (
+    <div>
+      <SiteMap />
+
+      <BigSpacer />
+      <div className="row">
+        <div className="col-lg-1" />
+
+        <div className="col-lg-10">
+          <div className="iconParagraph">
+            {"Hadfield "}
+            <i>{"et al., "}</i>
+            <a
+              href="https://doi.org/10.1093/bioinformatics/bty407"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Nextstrain: real-time tracking of pathogen evolution
+            </a>
+            <i>, Bioinformatics</i> (2018)
+
+            <TeamList />
+
+          </div>
+        </div>
+
+        <div className="col-lg-1" />
+      </div>
+
+      <BigSpacer />
+      <div className="row">
+        <div className="col-lg-12">
+          <p className="wideParagraph">
+            All <a href="https://github.com/nextstrain">source code</a> is
+            freely available under the terms of the{" "}
+            <a href="https://github.com/nextstrain/auspice/blob/master/LICENSE.txt">
+              GNU Affero General Public License
+            </a>
+            . Screenshots may be used under a{" "}
+            <a href="https://creativecommons.org/licenses/by/4.0/">
+              CC-BY-4.0 license
+            </a>{" "}
+            and attribution to nextstrain.org must be provided.
+          </p>
+          <p className="wideParagraph">
+            This work is made possible by the open sharing of genetic data by
+            research groups from all over the world. We gratefully acknowledge
+            their contributions. Special thanks to Kristian Andersen, Josh
+            Batson, David Blazes, Jesse Bloom, Peter Bogner, Anderson Brito,
+            Matt Cotten, Ana Crisan, Tulio de Oliveira, Gytis Dudas, Vivien
+            Dugan, Karl Erlandson, Nuno Faria, Jennifer Gardy, Nate Grubaugh,
+            Becky Kondor, Dylan George, Ian Goodfellow, Betz Halloran, Christian
+            Happi, Jeff Joy, Paul Kellam, Philippe Lemey, Nick Loman, Duncan
+            MacCannell, Erick Matsen, Sebastian Maurer-Stroh, Placide Mbala,
+            Danny Park, Oliver Pybus, Andrew Rambaut, Colin Russell, Pardis
+            Sabeti, Katherine Siddle, Kristof Theys, Dave Wentworth, Shirlee
+            Wohl and Cecile Viboud for comments, suggestions and data sharing.
+          </p>
+        </div>
+      </div>
+
+      <SmallSpacer />
+
+      {/* FOOTER / LOGOS */}
+      <Logos />
+
+      <SmallSpacer />
+
+      <div className="row">
+        <div className="col-lg-12">
+          <p className="footerParagraph copyright">© Trevor Bedford and Richard Neher</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/static-site/components/footer/site-map.module.css b/static-site/components/footer/site-map.module.css
new file mode 100644
index 000000000..391d9b0ce
--- /dev/null
+++ b/static-site/components/footer/site-map.module.css
@@ -0,0 +1,46 @@
+.siteMap {
+  /* Center contents */
+  margin: 0 auto !important;
+
+  /* Ensure that, on wide screens, 4 sections renders to roughly align
+  with the width of IconParagraph (rendered below this element) */
+  max-width: 680px;
+}
+
+/* Wrapper is used to center the actual Section while allowing it to be left-aligned. */
+.sectionWrapper {
+  /* Center section contents when all sections are displayed in a single row */
+  @media (min-width: 768px) {
+    text-align: center;
+  }
+
+  /* Otherwise, when there are multiple rows, left-align so columns are aligned */
+  text-align: left;
+}
+
+.section {
+  display: inline-block;
+  text-align: left;
+}
+
+.sectionEntry {
+  font-size: var(--niceFontSize);
+  font-weight: 500;
+  line-height: 0.5;
+  margin: 20px 0px 0px;
+  max-width: 640px;
+  text-align: left;
+}
+
+.sectionEntry a {
+  color: #000 !important;
+}
+
+.unstyled {
+  list-style: none;
+}
+
+.footerIcon {
+  margin-left: 2px;
+  font-size: 12px;
+}
diff --git a/static-site/components/footer/site-map.tsx b/static-site/components/footer/site-map.tsx
new file mode 100644
index 000000000..05257f0ae
--- /dev/null
+++ b/static-site/components/footer/site-map.tsx
@@ -0,0 +1,50 @@
+import { FaExternalLinkAlt } from "react-icons/fa";
+
+import React from "react";
+
+import{ BigSpacer} from "../spacers";
+
+import styles from "./site-map.module.css";
+import {sections, Entry, Section} from "./sitemap";
+
+export default function SiteMap(): React.ReactElement {
+  return (
+    <div className={`${styles.siteMap} row`}>
+      {sections.map((section: Section) => (
+        <div
+          className={`col-md-3 col-sm-6 ${styles.sectionWrapper}`}
+          key={section.title}
+        >
+          <div className={styles.section}>
+            <BigSpacer />
+            <h3>{section.title}</h3>
+            <SectionList entries={section.entries} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SectionList({ entries }:{entries: Entry[]}): React.ReactElement {
+  return (
+    <ul className={styles.unstyled}>
+      {entries.map((entry) => (
+        <li key={entry.name}>
+          <p className={styles.sectionEntry}>
+            {entry.href.startsWith("http") ? (
+              <a href={entry.href} rel="noopener noreferrer" target="_blank">
+                {entry.name}{" "}
+                <span className={styles.footerIcon}>
+                  <FaExternalLinkAlt />
+                </span>
+              </a>
+            ) : (
+              <a href={entry.href}>{entry.name}</a>
+            )}
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/static-site/components/footer/sitemap.ts b/static-site/components/footer/sitemap.ts
new file mode 100644
index 000000000..412507658
--- /dev/null
+++ b/static-site/components/footer/sitemap.ts
@@ -0,0 +1,49 @@
+export type Entry = {
+  name: string;
+  href: string;
+};
+
+export type Section = {
+  title: string;
+  entries: Entry[];
+};
+
+export const sections: Section[] = [
+  {
+    title: "Resources",
+    entries: [
+      { name: "Core pathogens", href: "/pathogens" },
+      { name: "SARS-CoV-2", href: "/sars-cov-2" },
+      { name: "Community", href: "/community" },
+      { name: "Groups", href: "/groups" },
+    ],
+  },
+  {
+    title: "Tools",
+    entries: [
+      { name: "Nextclade", href: "https://clades.nextstrain.org/" },
+      { name: "Auspice.us", href: "https://auspice.us/" },
+      { name: "Augur", href: "https://docs.nextstrain.org/projects/augur" },
+      { name: "Auspice", href: "https://docs.nextstrain.org/projects/auspice" },
+      {
+        name: "Nextstrain CLI",
+        href: "https://docs.nextstrain.org/projects/cli",
+      },
+    ],
+  },
+  {
+    title: "Support",
+    entries: [
+      { name: "Documentation", href: "https://docs.nextstrain.org/" },
+      { name: "Discussion forum", href: "https://discussion.nextstrain.org/" },
+    ],
+  },
+  {
+    title: "About",
+    entries: [
+      { name: "Team", href: "/team" },
+      { name: "Blog", href: "/blog" },
+      { name: "Contact", href: "/contact" },
+    ],
+  },
+];
diff --git a/static-site/components/footer/team-list.tsx b/static-site/components/footer/team-list.tsx
new file mode 100644
index 000000000..592f76212
--- /dev/null
+++ b/static-site/components/footer/team-list.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+// Because we don't want to show the footer version of the team list
+// on the team page, this component needs access to the pathname, so
+// it can decide whether or not to show the list in the footer --
+// which means it needs to be a client component.
+
+import { usePathname } from "next/navigation";
+import React from "react";
+
+import { MediumSpacer } from "../../src/layouts/generalComponents";
+import { FooterTeamList } from "../people/avatars";
+
+export default function TeamList() {
+  const pathname = usePathname();
+
+  if (pathname?.match(/team\/?$/)) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <MediumSpacer />
+      The core Nextstrain team is
+      <div style={{ margin: "0px 0px" }} />
+      <FooterTeamList />
+      Please see the <a href="/team">team page</a> for more details.
+    </>
+  );
+}
diff --git a/static-site/components/line/index.tsx b/static-site/components/line/index.tsx
new file mode 100644
index 000000000..8835de1c1
--- /dev/null
+++ b/static-site/components/line/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+
+export default function Line (): React.ReactElement {
+  return <div className={styles.line}></div>
+}
+
diff --git a/static-site/components/line/styles.module.css b/static-site/components/line/styles.module.css
new file mode 100644
index 000000000..56ff18abe
--- /dev/null
+++ b/static-site/components/line/styles.module.css
@@ -0,0 +1,5 @@
+.line {
+    border-bottom: 1px solid var(--lightGrey);
+    margin-bottom: 30px;
+    margin-top: 30px;
+}
diff --git a/static-site/components/logos/index.tsx b/static-site/components/logos/index.tsx
new file mode 100644
index 000000000..1958b5c7b
--- /dev/null
+++ b/static-site/components/logos/index.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+
+import fredHutchLogo from "../../static/logos/fred-hutch-logo-small.png";
+import uniBasLogo from "../../static/logos/unibas-logo.svg";
+import nihLogo from "../../static/logos/nih-logo.jpg";
+import bmgfLogo from "../../static/logos/bmgf.png";
+import mapBoxLogo from "../../static/logos/mapbox-logo-black.svg";
+import sibLogo from "../../static/logos/sib-logo.png";
+import ospLogo from "../../static/logos/osp-logo-small.png";
+import bzLogo from "../../static/logos/bz_logo.png";
+
+import styles from "./styles.module.css";
+import { width } from "../../src/components/Groups/Tiles/styles";
+
+type Logo = {
+  imgSrc: string;
+  href: string;
+  width: number;
+};
+
+export default function Logos(): React.ReactElement {
+  const logos: Logo[] = [
+    {
+      imgSrc: fredHutchLogo.src,
+      href: "http://www.fredhutch.org/",
+      width: 90,
+    },
+    {
+      imgSrc: uniBasLogo.src,
+      href: "http://www.unibas.ch/",
+      width: 110,
+    },
+    {
+      imgSrc: nihLogo.src,
+      href: "https://www.nih.gov/",
+      width: 60,
+    },
+    {
+      imgSrc: bmgfLogo.src,
+      href: "https://www.gatesfoundation.org/",
+      width: 130,
+    },
+    {
+      imgSrc: sibLogo.src,
+      href: "https://www.sib.swiss/",
+      width: 80,
+    },
+    {
+      imgSrc: mapBoxLogo.src,
+      href: "https://www.mapbox.com",
+      width: 110,
+    },
+    {
+      imgSrc: ospLogo.src,
+      href: "https://www.nih.gov/news-events/news-releases/open-science-prize-announces-epidemic-tracking-tool-grand-prize-winner",
+      width: 100,
+    },
+    {
+      imgSrc: bzLogo.src,
+      href: "http://biozentrum.org/",
+      width: 115,
+    },
+  ];
+
+  return (
+    <div className="row">
+      <div className="col-lg-12">
+        <p className="footerParagraph">Nextstrain is supported by</p>
+
+        <div className={styles.allLogosContainer}>
+          {logos.map((logo: Logo) => (
+            <Logo href={logo.href} imgSrc={logo.imgSrc} width={logo.width} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Logo({
+  href,
+  imgSrc,
+  width,
+}: {
+  href: string;
+  imgSrc: string;
+  width: number;
+}): React.ReactElement {
+  return (
+    <a
+      className={styles.logoLink}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span className={styles.logoImageSpan} />
+      <img
+        className={styles.logoImage}
+        style={{ width: `${width}px`, maxWidth: `${width}px` }}
+        alt="logo"
+        src={imgSrc}
+        width={width}
+      />
+    </a>
+  );
+}
+
+// export const Logos = () => (
+//   <div className="row">
+//     <div className="col-lg-12">
+
+//       <Styles.FooterParagraph>
+//         Nextstrain is supported by
+//       </Styles.FooterParagraph>
+
+//       <AllLogosContainer>
+//         <Logo href="http://www.fredhutch.org/" imgSrc={fredHutchLogo.default.src} width={90}/>
+//         <Logo href="http://www.unibas.ch/" imgSrc={uniBasLogo.default.src} width={110}/>
+//         <Logo href="https://www.nih.gov/" imgSrc={nihLogo.default.src} width={60}/>
+//         <Logo href="https://www.gatesfoundation.org/" imgSrc={bmgfLogo.default.src} width={130}/>
+//         <Logo href="https://www.sib.swiss/" imgSrc={sibLogo.default.src} width={80}/>
+//         <Logo href="https://www.mapbox.com" imgSrc={mapBoxLogo.default.src} width={110}/>
+//         <Logo href="https://www.nih.gov/news-events/news-releases/open-science-prize-announces-epidemic-tracking-tool-grand-prize-winner" imgSrc={ospLogo.default.src} width={100}/>
+//         <Logo href="http://biozentrum.org/" imgSrc={bzLogo.default.src} width={115}/>
+//       </AllLogosContainer>
+//     </div>
+//   </div>
+// );
diff --git a/static-site/components/logos/styles.module.css b/static-site/components/logos/styles.module.css
new file mode 100644
index 000000000..dbf05ccba
--- /dev/null
+++ b/static-site/components/logos/styles.module.css
@@ -0,0 +1,26 @@
+.allLogosContainer {
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin: 0px;
+  padding: 10px 0px 0px 0px;
+  display: flex;
+}
+
+.logoLink {
+  /* Using flex here (to vertically align the child img) causes aspect-ratio issues */
+  flex-basis: 120px;
+  margin: 10px auto 10px auto;
+  text-align: center;
+}
+
+.logoImageSpan {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.logoImage {
+  display: inline-block;
+  height: auto;
+  vertical-align: middle;
+}
diff --git a/static-site/components/nav/index.tsx b/static-site/components/nav/index.tsx
new file mode 100644
index 000000000..cb7d34b2a
--- /dev/null
+++ b/static-site/components/nav/index.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+import { groupsApp } from "../../data/BaseConfig";
+
+import NavLogo from "./nav-logo";
+
+import "./styles.css";
+
+export default function Nav(): React.ReactElement {
+  return (
+    <nav>
+      {/* because we don't want the logo on the front page, we need to
+      encapsulate this so it can be a client side component, and get
+      access to pathname() */}
+      <NavLogo />
+
+      <div style={{ flex: 5 }} />
+
+      {!groupsApp && (
+        <>
+          <a href="https://docs.nextstrain.org">DOCS</a>
+          <a href="/contact">CONTACT</a>
+          <a href="/blog/">BLOG</a>
+          {/* because we need access to the current context, this also
+          needs to be an encapsulated client component */}
+          {/* FIXME <UserOrLoginLink> */}
+        </>
+      )}
+    </nav>
+  );
+}
diff --git a/static-site/components/nav/nav-logo.tsx b/static-site/components/nav/nav-logo.tsx
new file mode 100644
index 000000000..6b44c598e
--- /dev/null
+++ b/static-site/components/nav/nav-logo.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+import { groupsApp, siteTitle } from "../../data/BaseConfig";
+import logo from "../../static/logos/nextstrain-logo-small.png";
+
+export default function NavLogo(): React.ReactElement | null {
+  const pathname = usePathname();
+
+  return pathname !== "/" ? (
+    <>
+      <Logo />
+      <LogoType />
+    </>
+  ) : null;
+}
+
+const Logo = (): React.ReactElement => (
+  <a href="/" className="logo">
+    <Image src={logo} alt="Nextstrain (logo)" width="40" />
+  </a>
+);
+
+const LogoType = (): React.ReactElement => {
+  const rainbowTitle = siteTitle
+    .split("")
+    .map((letter, i) => (
+      <span key={i} style={{ color: "var(--titleColor" + i + ")" }}>{letter}</span>
+    ));
+  const SubTitle = (): React.ReactElement => (
+    <div className="wordmark-subtitle">Groups Server</div>
+  );
+
+  return (
+    <a href="/" className="wordmark">
+      {rainbowTitle}
+      {groupsApp && <SubTitle />}
+    </a>
+  );
+};
diff --git a/static-site/components/nav/styles.css b/static-site/components/nav/styles.css
new file mode 100644
index 000000000..69d371c55
--- /dev/null
+++ b/static-site/components/nav/styles.css
@@ -0,0 +1,30 @@
+nav {
+  align-items: center;
+  display: flex;
+  height: 50px;
+  justify-content: space-between;
+  left: 0px;
+  margin: auto;
+  overflow: hidden;
+
+  a {
+    color: var(--darkGrey);
+    font-size: 16px;
+    font-weight: 400;
+    padding: 20px 12px;
+    text-decoration: none;
+  }
+
+  .logo {
+    padding: 0 2px 0 8px;
+  }
+
+  .wordmark {
+    padding: 0px;
+
+    > span {
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
+}
diff --git a/static-site/components/people/avatars.module.css b/static-site/components/people/avatars.module.css
new file mode 100644
index 000000000..5105289a7
--- /dev/null
+++ b/static-site/components/people/avatars.module.css
@@ -0,0 +1,30 @@
+.commonWrapper {
+  & a {
+    font-weight: 500 !important;
+    color: #333 !important;
+  }
+  & img {
+    margin-left: 5px;
+    border-radius: 50%;
+    vertical-align: middle;
+  }
+}
+
+.footerWrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  & a {
+    font-weight: 500 !important;
+    color: #333 !important;
+  }
+  & img {
+    border-radius: 50%;
+    height: 32px;
+    margin-left: 5px;
+    margin-right: 8px;
+    vertical-align: middle;
+    width: 32px;
+  }
+}
diff --git a/static-site/components/people/avatars.tsx b/static-site/components/people/avatars.tsx
new file mode 100644
index 000000000..29e9f8fbf
--- /dev/null
+++ b/static-site/components/people/avatars.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import styles from "./avatars.module.scss";
+import { TeamMember, teamMembers } from "./teamMembers";
+
+export function FooterTeamList(): React.ReactElement {
+  const people = [...teamMembers["founders"], ...teamMembers["core"]];
+
+  return (
+    <div className={styles.footerWrapper}>
+      {people.map(
+        (person: TeamMember, i: number): React.ReactElement => (
+          <div key={person.name}>
+            <MaybeLinked link={person.link}>
+              <img
+                alt={person.name}
+                src={require("../../static/team/" + person.image).default.src}
+              />
+              <span style={{ whiteSpace: "nowrap" }}>{person.name}</span>
+            </MaybeLinked>
+            {i + 1 !== people.length && <Comma />}
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+function MaybeLinked({
+  link,
+  children,
+}: {
+  link: string | undefined;
+  children: React.ReactNode;
+}) {
+  return link ? <a href={link}>{children}</a> : children;
+}
+
+function Comma(): React.ReactElement {
+  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
+}
+
diff --git a/static-site/components/people/teamMembers.ts b/static-site/components/people/teamMembers.ts
new file mode 100644
index 000000000..2d6ec7b15
--- /dev/null
+++ b/static-site/components/people/teamMembers.ts
@@ -0,0 +1,219 @@
+export type TeamMember = {
+  name: string;
+  image: string;
+  link?: string;
+  blurb?: string;
+};
+
+export const teamMembers: {
+  founders: TeamMember[];
+  core: TeamMember[];
+  alumni: TeamMember[];
+  board: TeamMember[];
+} = {
+  founders: [
+    {
+      name: "Trevor Bedford",
+      image: "trevor-bedford.jpg",
+      link: "https://bedford.io/team/trevor-bedford/",
+      blurb:
+        "Trevor and Richard coded first version of Nextflu in early 2015. Subsequently, Trevor has helped to guide development of software to endemic and emerging pathogens with a focus on UX and scientific impact.",
+    },
+    {
+      name: "Richard Neher",
+      image: "richard-neher.jpg",
+      link: "https://neherlab.org/richard-neher.html",
+      blurb:
+        "Richard and Trevor coded first version of Nextflu in early 2015. Richard has focussed on the methods and algorithms in Nextstrain's analyses and more recently on Nextclade.",
+    },
+  ],
+  core: [
+    {
+      name: "Ivan Aksamentov",
+      image: "ivan-aksamentov.jpg",
+      link: "https://neherlab.org/ivan-aksamentov.html",
+      blurb:
+        "Ivan joined the team in 2020 and focuses on Nextclade and some of the algorithms in Nextstrain's underlying tools.",
+    },
+    {
+      name: "John SJ Anderson",
+      image: "john-sj-anderson.jpg",
+      link: "https://bedford.io/team/john-sj-anderson/",
+      blurb:
+        "John joined the team in 2024 and works on all aspects of Nextstrain.",
+    },
+    {
+      name: "Kim Andrews",
+      image: "kim-andrews.jpg",
+      link: "https://bedford.io/team/kim-andrews/",
+      blurb:
+        "Kim joined the team in 2023 with a background in ecological and evolutionary genomics, and focuses on pathogen workflows.",
+    },
+    {
+      name: "Jennifer Chang",
+      image: "jennifer-chang.jpg",
+      link: "https://bedford.io/team/jennifer-chang/",
+      blurb:
+        "Jennifer joined the team in 2021 and specializes in Terra and Nextflow workflows and contributes to various pathogen workflows as needed.",
+    },
+    {
+      name: "James Hadfield",
+      image: "james-hadfield.jpg",
+      link: "https://bedford.io/team/james-hadfield/",
+      blurb:
+        "James joined the team in 2017 after his PhD and works on all aspects of Nextstrain with a particular focus on interactive visualisation.",
+    },
+    {
+      name: "Emma Hodcroft",
+      image: "emma-hodcroft.jpg",
+      link: "https://emmahodcroft.com/",
+      blurb:
+        "Emma joined Nextstrain in 2017 and has worked on the pipeline and visualization, including extending Nextstrain to use VCF files, but now mostly focuses on Enteroviruses and SARS-CoV-2.",
+    },
+    {
+      name: "John Huddleston",
+      image: "john-huddleston.jpg",
+      link: "https://bedford.io/team/john-huddleston/",
+      blurb:
+        "John works on Nextstrain's bioinformatics tools like Augur and pathogen workflows like seasonal influenza and SARS-CoV-2.",
+    },
+    {
+      name: "Jover Lee",
+      image: "jover-lee.jpg",
+      link: "https://bedford.io/team/jover-lee/",
+      blurb:
+        "Jover works on all aspects of Nextstrain with a particular focus on data pipelines and visualizations.",
+    },
+    {
+      name: "Victor Lin",
+      image: "victor-lin.png",
+      link: "https://bedford.io/team/victor-lin/",
+      blurb:
+        "Victor joined the team in 2021 and works on all aspects of Nextstrain with a particular focus on tooling (e.g. Augur, runtimes) and documentation.",
+    },
+    {
+      name: "Cornelius Roemer",
+      image: "cornelius-roemer.jpg",
+      link: "https://neherlab.org/cornelius-roemer.html",
+      blurb:
+        "Cornelius joined the team in 2021 and focuses on Nextclade and SARS-CoV-2.",
+    },
+    {
+      name: "Thomas Sibley",
+      image: "thomas-sibley.jpg",
+      link: "https://bedford.io/team/thomas-sibley/",
+      blurb:
+        "Thomas works on all aspects of Nextstrain with a particular focus on reducing barriers to usage via better infrastructure (e.g. nextstrain.org, Groups), tooling (e.g. CLI, runtimes), and documentation.",
+    },
+  ],
+  alumni: [
+    {
+      name: "Sidney Bell",
+      image: "sidney-bell.jpg",
+      link: "https://bedford.io/team/sidney-bell/",
+    },
+    {
+      name: "Allison Black",
+      image: "allison-black.jpg",
+      link: "https://bedford.io/team/allison-black/",
+    },
+    {
+      name: "Charlton Callender",
+      image: "charlton-callender.jpg",
+      link: "https://bedford.io/team/charlton-callender/",
+    },
+    {
+      name: "Kairsten Fay",
+      image: "kairsten-fay.jpg",
+      link: "https://bedford.io/team/kairsten-fay/",
+    },
+    {
+      name: "Eli Harkins",
+      image: "eli-harkins.jpg",
+      link: "https://bedford.io/team/eli-harkins/",
+    },
+    {
+      name: "Misja Ilcisin",
+      image: "misja-ilcisin.jpg",
+      link: "https://bedford.io/team/misja-ilcisin/",
+    },
+    {
+      name: "Colin Megill",
+      image: "colin-megill.jpg",
+      link: "https://www.colinmegill.com/",
+    },
+    {
+      name: "Louise Moncla",
+      image: "louise-moncla.jpg",
+      link: "https://bedford.io/team/louise-moncla/",
+    },
+    {
+      name: "Miguel Parades",
+      image: "miguel-parades.jpg",
+      link: "https://bedford.io/team/miguel-parades/",
+    },
+    {
+      name: "Barney Potter",
+      image: "barney-potter.jpg",
+      link: "https://bedford.io/team/barney-potter/",
+    },
+    {
+      name: "Pavel Sagulenko",
+      image: "pavel-sagulenko.jpg",
+      link: "https://neherlab.org/pavel-sagulenko.html",
+    },
+    {
+      name: "Cassia Wagner",
+      image: "cassia-wagner.jpg",
+      link: "https://bedford.io/team/cassia-wagner/",
+    },
+    {
+      name: "Moira Zuber",
+      image: "moira-zuber.jpg",
+      blurb:
+        "Moira was key in running the regular SARS-CoV-2 builds during the early-mid pandemic, and implementing key data-cleaning scripts to standardize incoming sequences.",
+    },
+  ],
+  board: [
+    {
+      name: "Vítor Borges (chair)",
+      image: "vitor-borges.jpg",
+      link: "https://orcid.org/0000-0003-3767-2209",
+      blurb:
+        "Researcher, National Institute of Health Dr Ricardo Jorge, Portugal",
+    },
+    {
+      name: "Sarah Cobey",
+      image: "sarah-cobey.jpg",
+      link: "https://cobeylab.uchicago.edu/",
+      blurb:
+        "Professor, Department of Ecology and Evolution, University of Chicago, USA",
+    },
+    {
+      name: "Peter van Heusden",
+      image: "peter-van-heusden.jpg",
+      link: "https://orcid.org/0000-0001-6553-5274",
+      blurb:
+        "Researcher, South African National Bioinformatics Institute, South Africa",
+    },
+    {
+      name: "Zamin Iqbal",
+      image: "zamin-iqbal.png",
+      blurb: "Professor, Milner Centre for Evolution, University of Bath, UK",
+    },
+    {
+      name: "Nicola Lewis",
+      image: "nicola-lewis.jpg",
+      link: "https://www.crick.ac.uk/research/find-a-researcher/nicola-lewis",
+      blurb:
+        "Director, Worldwide Influenza Centre, The Francis Crick Institute, UK",
+    },
+    {
+      name: "Nídia Trovão",
+      image: "nidia-trovao.jpg",
+      link: "https://www.fic.nih.gov/About/Staff/epidemiology-population-studies/Pages/Genomic-Epidemiology-and-Evolution-of-Pathogens-.aspx",
+      blurb:
+        "Section Leader, Fogarty International Center, National Institutes of Health, USA",
+    },
+  ],
+};
diff --git a/static-site/components/plausible-analytics/index.tsx b/static-site/components/plausible-analytics/index.tsx
new file mode 100644
index 000000000..9200ea2d8
--- /dev/null
+++ b/static-site/components/plausible-analytics/index.tsx
@@ -0,0 +1,16 @@
+import Script from "next/script";
+import React from "react";
+
+export default function PlausibleAnalytics(): React.ReactElement {
+  /* See <https://plausible.io/docs/plausible-script>. Analytics are disabled on
+     localhost, but use `script.local.js` if you want to track localhost for
+     testing purposes */
+  return (
+    <Script
+      src="https://plausible.io/js/script.js"
+      data-domain="nextstrain.org"
+      async
+      defer
+    />
+  );
+}
diff --git a/static-site/components/spacers/index.tsx b/static-site/components/spacers/index.tsx
new file mode 100644
index 000000000..5b2e5e175
--- /dev/null
+++ b/static-site/components/spacers/index.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+const DEFAULT_HEIGHTS = {
+  small: 5,
+  medium: 10,
+  big: 20,
+  huge: 40,
+};
+
+function Spacer({
+  count,
+  height,
+}: {
+  count?: number;
+  height: number;
+}): React.ReactElement {
+  if (!count) {
+    count = 1;
+  }
+
+  return <div style={{ height: count * height }}></div>;
+}
+
+export function SmallSpacer({ count }: { count?: number }): React.ReactElement {
+  return <Spacer count={count} height={DEFAULT_HEIGHTS["small"]} />;
+}
+
+export function MediumSpacer({ count }: { count?: number }): React.ReactElement {
+  return <Spacer count={count} height={DEFAULT_HEIGHTS["medium"]} />;
+}
+
+export function BigSpacer({ count }: { count?: number }): React.ReactElement {
+  return <Spacer count={count} height={DEFAULT_HEIGHTS["big"]} />;
+}
+export function HugeSpacer({ count }: { count?: number }): React.ReactElement {
+  return <Spacer count={count} height={DEFAULT_HEIGHTS["huge"]} />;
+}

From e5e36f8fa6a52c9460fd7fa22192fced564080a0 Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Wed, 25 Sep 2024 17:28:27 -0700
Subject: [PATCH 3/8] Convert 'contact' page to App Router [#134]

---
 static-site/app/contact/page.tsx              | 57 +++++++++++++++++++
 static-site/app/styles/globals.css            |  3 +
 static-site/components/flex-center/index.tsx  | 11 ++++
 .../components/flex-center/styles.module.css  |  6 ++
 .../components/focus-paragraph/index.tsx      | 11 ++++
 .../focus-paragraph/styles.module.css         |  8 +++
 static-site/components/logos/index.tsx        | 25 +-------
 static-site/pages/contact.jsx                 |  3 -
 static-site/src/pages/contact.jsx             | 41 -------------
 static-site/types.d.ts                        | 26 ++++++++-
 10 files changed, 120 insertions(+), 71 deletions(-)
 create mode 100644 static-site/app/contact/page.tsx
 create mode 100644 static-site/components/flex-center/index.tsx
 create mode 100644 static-site/components/flex-center/styles.module.css
 create mode 100644 static-site/components/focus-paragraph/index.tsx
 create mode 100644 static-site/components/focus-paragraph/styles.module.css
 delete mode 100644 static-site/pages/contact.jsx
 delete mode 100644 static-site/src/pages/contact.jsx

diff --git a/static-site/app/contact/page.tsx b/static-site/app/contact/page.tsx
new file mode 100644
index 000000000..a3818a81c
--- /dev/null
+++ b/static-site/app/contact/page.tsx
@@ -0,0 +1,57 @@
+import type { Metadata } from "next";
+import React from "react";
+
+import { BigSpacer } from "../../components/spacers";
+import FlexCenter from "../../components/flex-center";
+import FocusParagraphNarrow from "../../components/focus-paragraph";
+
+export const metadata: Metadata = {
+  title: "Contact",
+};
+
+export default function ContactPage(): React.ReactElement {
+  return (
+    <>
+      <BigSpacer count={4} />
+
+      <h1>Contact Us</h1>
+
+      <FlexCenter>
+        <FocusParagraphNarrow>
+          We are a small team, but connecting with users is important to us.
+          <br />
+          <br />
+          If you have a general question about Nextstrain, we encourage you to
+          post on our{" "}
+          <a
+            href="https://discussion.nextstrain.org"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            discussion forum
+          </a>
+          , where both Nextstrain team members and other community members can
+          assist you.
+          <br />
+          <br />
+          To send a bug report or feature request, please open an issue in one
+          of our{" "}
+          <a href="https://github.com/orgs/nextstrain/repositories">
+            GitHub repositories
+          </a>
+          .
+          <br />
+          <br />
+          For private inquiries, you can reach us at hello
+          <span style={{ display: "none" }}>obfuscate</span>@nextstrain.org.
+          <br />
+          <br />
+          We also host office hours via Zoom every week on Thursdays at 10AM US
+          Pacific time. Email us for the meeting link.
+        </FocusParagraphNarrow>
+      </FlexCenter>
+
+      <BigSpacer />
+    </>
+  );
+}
diff --git a/static-site/app/styles/globals.css b/static-site/app/styles/globals.css
index 950fd5289..15f1e374a 100644
--- a/static-site/app/styles/globals.css
+++ b/static-site/app/styles/globals.css
@@ -18,7 +18,10 @@
   --mediumGrey: #888;
   --lightGrey: #ccc;
 
+  --niceFontSize: 16px;
   --niceLineHeight: 1.6;
+
+  --tightLineHight: 1.4;
 }
 
 * {
diff --git a/static-site/components/flex-center/index.tsx b/static-site/components/flex-center/index.tsx
new file mode 100644
index 000000000..667dd9212
--- /dev/null
+++ b/static-site/components/flex-center/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+
+export default function FlexCenter({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <div className={styles.flexCenter}>{children}</div>;
+}
diff --git a/static-site/components/flex-center/styles.module.css b/static-site/components/flex-center/styles.module.css
new file mode 100644
index 000000000..4b7c3d64f
--- /dev/null
+++ b/static-site/components/flex-center/styles.module.css
@@ -0,0 +1,6 @@
+.flexCenter {
+  display: flex;
+  justify-content: center;
+  margin: 0px;
+  padding: 0px;
+}
diff --git a/static-site/components/focus-paragraph/index.tsx b/static-site/components/focus-paragraph/index.tsx
new file mode 100644
index 000000000..f8d1c8f76
--- /dev/null
+++ b/static-site/components/focus-paragraph/index.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+
+export default function FocusParagraphNarrow({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <p className={styles.focus}>{children}</p>;
+}
diff --git a/static-site/components/focus-paragraph/styles.module.css b/static-site/components/focus-paragraph/styles.module.css
new file mode 100644
index 000000000..d7cbd048a
--- /dev/null
+++ b/static-site/components/focus-paragraph/styles.module.css
@@ -0,0 +1,8 @@
+.focus {
+  font-size: var(--niceFontSize);
+  font-weight: 300;
+  line-height: var(--tightLineHight);
+  margin: 20px 0px 0px;
+  max-width: 640px;
+  text-align: left;
+}
diff --git a/static-site/components/logos/index.tsx b/static-site/components/logos/index.tsx
index 1958b5c7b..2ffc65341 100644
--- a/static-site/components/logos/index.tsx
+++ b/static-site/components/logos/index.tsx
@@ -10,7 +10,6 @@ import ospLogo from "../../static/logos/osp-logo-small.png";
 import bzLogo from "../../static/logos/bz_logo.png";
 
 import styles from "./styles.module.css";
-import { width } from "../../src/components/Groups/Tiles/styles";
 
 type Logo = {
   imgSrc: string;
@@ -69,7 +68,7 @@ export default function Logos(): React.ReactElement {
 
         <div className={styles.allLogosContainer}>
           {logos.map((logo: Logo) => (
-            <Logo href={logo.href} imgSrc={logo.imgSrc} width={logo.width} />
+            <Logo key={logo.href} href={logo.href} imgSrc={logo.imgSrc} width={logo.width} />
           ))}
         </div>
       </div>
@@ -104,25 +103,3 @@ function Logo({
     </a>
   );
 }
-
-// export const Logos = () => (
-//   <div className="row">
-//     <div className="col-lg-12">
-
-//       <Styles.FooterParagraph>
-//         Nextstrain is supported by
-//       </Styles.FooterParagraph>
-
-//       <AllLogosContainer>
-//         <Logo href="http://www.fredhutch.org/" imgSrc={fredHutchLogo.default.src} width={90}/>
-//         <Logo href="http://www.unibas.ch/" imgSrc={uniBasLogo.default.src} width={110}/>
-//         <Logo href="https://www.nih.gov/" imgSrc={nihLogo.default.src} width={60}/>
-//         <Logo href="https://www.gatesfoundation.org/" imgSrc={bmgfLogo.default.src} width={130}/>
-//         <Logo href="https://www.sib.swiss/" imgSrc={sibLogo.default.src} width={80}/>
-//         <Logo href="https://www.mapbox.com" imgSrc={mapBoxLogo.default.src} width={110}/>
-//         <Logo href="https://www.nih.gov/news-events/news-releases/open-science-prize-announces-epidemic-tracking-tool-grand-prize-winner" imgSrc={ospLogo.default.src} width={100}/>
-//         <Logo href="http://biozentrum.org/" imgSrc={bzLogo.default.src} width={115}/>
-//       </AllLogosContainer>
-//     </div>
-//   </div>
-// );
diff --git a/static-site/pages/contact.jsx b/static-site/pages/contact.jsx
deleted file mode 100644
index a93b13cde..000000000
--- a/static-site/pages/contact.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/contact"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/contact.jsx b/static-site/src/pages/contact.jsx
deleted file mode 100644
index 9819cc171..000000000
--- a/static-site/src/pages/contact.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from "react";
-import GenericPage from "../layouts/generic-page";
-import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
-import { H1, NarrowFocusParagraph } from "../components/splash/styles";
-
-
-const Contact = () => (
-  <GenericPage>
-      <H1>Contact Us</H1>
-
-      <FlexCenter>
-        <NarrowFocusParagraph>
-          We are a small team, but connecting with users is important to us.
-          <br/>
-          <br/>
-          If you have a general question about Nextstrain, we encourage you to post on our{" "}
-          <a href="https://discussion.nextstrain.org" target="_blank" rel="noreferrer noopener">
-            discussion forum
-          </a>, where both Nextstrain team members and other community members can assist you.
-          <br/>
-          <br/>
-          To send a bug report or feature request, please open an issue in one of our{" "}
-          <a href="https://github.com/orgs/nextstrain/repositories">
-            GitHub repositories
-          </a>.
-          <br/>
-          <br/>
-          For private inquiries, you can reach us at
-          hello<span style={{display: "none"}}>obfuscate</span>@nextstrain.org.
-          <br/>
-          <br/>
-          We also host office hours via Zoom every week on Thursdays at 10AM US Pacific time.
-          Email us for the meeting link.
-        </NarrowFocusParagraph>
-      </FlexCenter>
-
-      <BigSpacer/>
-  </GenericPage>
-);
-
-export default Contact;
diff --git a/static-site/types.d.ts b/static-site/types.d.ts
index 2fe4c4785..38acd62a2 100644
--- a/static-site/types.d.ts
+++ b/static-site/types.d.ts
@@ -1,5 +1,25 @@
-declare module '*.yaml' {
+declare module "*.css" {
+  const value: unknown;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.png" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: { src: string };
+  export default value;
+}
+
+declare module "*.yaml" {
   // Actual type should be set upon import via type assertion.
-  const contents: unknown
-  export default contents
+  const contents: unknown;
+  export default contents;
 }

From 03b63e3db3da47c378a42011603ec4a3bd97d2fa Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Thu, 17 Oct 2024 16:10:22 -0700
Subject: [PATCH 4/8] Convert 'team' page to App Router [#134]

Note: this includes some updates to the FocusParagraph component which
required some knock-on changes in the 'contact' page, due to the
exports of FocusParagraph changing.
---
 static-site/app/contact/page.tsx              |  2 +-
 static-site/app/team/page.tsx                 | 60 ++++++++++++++
 static-site/app/team/styles.module.css        | 10 +++
 .../components/flex-center/styles.module.css  |  1 +
 .../components/focus-paragraph/index.tsx      | 12 ++-
 .../focus-paragraph/styles.module.css         | 16 +++-
 .../components/people/avatars.module.css      | 83 ++++++++++++++-----
 static-site/components/people/avatars.tsx     | 48 +++++++++--
 static-site/pages/team.jsx                    |  3 -
 static-site/src/pages/team.jsx                | 74 -----------------
 10 files changed, 201 insertions(+), 108 deletions(-)
 create mode 100644 static-site/app/team/page.tsx
 create mode 100644 static-site/app/team/styles.module.css
 delete mode 100644 static-site/pages/team.jsx
 delete mode 100644 static-site/src/pages/team.jsx

diff --git a/static-site/app/contact/page.tsx b/static-site/app/contact/page.tsx
index a3818a81c..803bd60a0 100644
--- a/static-site/app/contact/page.tsx
+++ b/static-site/app/contact/page.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { BigSpacer } from "../../components/spacers";
 import FlexCenter from "../../components/flex-center";
-import FocusParagraphNarrow from "../../components/focus-paragraph";
+import { FocusParagraphNarrow } from "../../components/focus-paragraph";
 
 export const metadata: Metadata = {
   title: "Contact",
diff --git a/static-site/app/team/page.tsx b/static-site/app/team/page.tsx
new file mode 100644
index 000000000..52d3a7d3c
--- /dev/null
+++ b/static-site/app/team/page.tsx
@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import React from "react";
+
+import FlexCenter from "../../components/flex-center";
+import { FocusParagraphCentered } from "../../components/focus-paragraph";
+import { BigSpacer } from "../../components/spacers";
+import { TeamPageList } from "../../components/people/avatars";
+
+import styles from "./styles.module.css";
+
+export const metadata: Metadata = {
+  title: "Team",
+};
+
+export default function TeamPage(): React.ReactElement {
+  return (
+    <div className={styles.teamPage}>
+      <BigSpacer count={4} />
+
+      <h1>Nextstrain core team</h1>
+
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Nextstrain was co-founded by:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="founders" />
+
+      <FlexCenter>
+        <FocusParagraphCentered>
+          The core team currently working on Nextstrain are:
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="core" />
+
+      <h1>Nextstrain Alumni</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          Our previous core Nextstrain team members, some of whom are still
+          working on projects involving Nextstrain and/or maintaining specific
+          analyses. Beyond the core team there have been many code contributions
+          from the wider scientific and programming community; please see{" "}
+          <a href="https://github.com/nextstrain">our GitHub organization</a> to
+          see the history of (code) contributions.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <BigSpacer />
+      <TeamPageList membersKey="alumni" />
+
+      <h1>Scientific Advisory Board</h1>
+      <FlexCenter>
+        <FocusParagraphCentered>
+          In Oct 2023, a scientific advisory board was founded to provide
+          guidance on future directions for the Nextstrain project.
+        </FocusParagraphCentered>
+      </FlexCenter>
+      <TeamPageList membersKey="board" />
+    </div>
+  );
+}
diff --git a/static-site/app/team/styles.module.css b/static-site/app/team/styles.module.css
new file mode 100644
index 000000000..13dedd4e1
--- /dev/null
+++ b/static-site/app/team/styles.module.css
@@ -0,0 +1,10 @@
+.teamPage h1 {
+    color: var(--darkGrey);
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 32px;
+    margin-bottom: 20px;
+    margin-top: 0px;
+    min-width: 240px;
+    text-align: center;
+}
diff --git a/static-site/components/flex-center/styles.module.css b/static-site/components/flex-center/styles.module.css
index 4b7c3d64f..57a1a1138 100644
--- a/static-site/components/flex-center/styles.module.css
+++ b/static-site/components/flex-center/styles.module.css
@@ -1,5 +1,6 @@
 .flexCenter {
   display: flex;
+  flex-wrap: nowrap;
   justify-content: center;
   margin: 0px;
   padding: 0px;
diff --git a/static-site/components/focus-paragraph/index.tsx b/static-site/components/focus-paragraph/index.tsx
index f8d1c8f76..972195b4c 100644
--- a/static-site/components/focus-paragraph/index.tsx
+++ b/static-site/components/focus-paragraph/index.tsx
@@ -2,10 +2,18 @@ import React from "react";
 
 import styles from "./styles.module.css";
 
-export default function FocusParagraphNarrow({
+export function FocusParagraphCentered({
   children,
 }: {
   children: React.ReactNode;
 }): React.ReactElement {
-  return <p className={styles.focus}>{children}</p>;
+  return <p className={`${styles.focus} ${styles.centered}`}>{children}</p>;
+}
+
+export function FocusParagraphNarrow({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <p className={`${styles.focus} ${styles.narrow}`}>{children}</p>;
 }
diff --git a/static-site/components/focus-paragraph/styles.module.css b/static-site/components/focus-paragraph/styles.module.css
index d7cbd048a..6cfda11c8 100644
--- a/static-site/components/focus-paragraph/styles.module.css
+++ b/static-site/components/focus-paragraph/styles.module.css
@@ -1,8 +1,22 @@
+/* this is the basic style for all FocusParagraph */
 .focus {
   font-size: var(--niceFontSize);
   font-weight: 300;
   line-height: var(--tightLineHight);
-  margin: 20px 0px 0px;
   max-width: 640px;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphCentered */
+.centered {
+  margin: 20px 0 0;
+  text-align: center;
+}
+.centered > strong {
+  font-weight: 500;
+}
+
+/* this is specifically *added* to the base style for FocusParagraphNarrow */
+.narrow {
+  margin: 20px 0px 0px;
   text-align: left;
 }
diff --git a/static-site/components/people/avatars.module.css b/static-site/components/people/avatars.module.css
index 5105289a7..51553604b 100644
--- a/static-site/components/people/avatars.module.css
+++ b/static-site/components/people/avatars.module.css
@@ -1,30 +1,71 @@
-.commonWrapper {
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    margin-left: 5px;
-    border-radius: 50%;
-    vertical-align: middle;
-  }
+.commonWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.commonWrapper img {
+  border-radius: 50%;
+  margin-left: 5px;
+  vertical-align: middle;
 }
 
 .footerWrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
+}
+.footerWrapper a {
+  color: #333 !important;
+  font-weight: 500 !important;
+}
+.footerWrapper img {
+  border-radius: 50%;
+  height: 32px;
+  margin-left: 5px;
+  margin-right: 8px;
+  vertical-align: middle;
+  width: 32px;
+}
+
+.teamPageWrapper {
+  display: grid;
+  font-size: 18px;
+  justify-content: center;
+  grid-template-columns: minmax(min-content, 500px);
+  padding: 20px 0px;
 
-  & a {
-    font-weight: 500 !important;
-    color: #333 !important;
-  }
-  & img {
-    border-radius: 50%;
-    height: 32px;
-    margin-left: 5px;
-    margin-right: 8px;
-    vertical-align: middle;
-    width: 32px;
+  /* Bootstrap's .container applies 25px left and right margins.  Account for */
+  /* that when computing the minimum width to support two 333px columns. */
+  @media (min-width: calc(333px*2 + 25px*2)) {
+    grid-template-columns: repeat(auto-fit, 333px);
   }
 }
+.teamPageWrapper a {
+  color: var(--darkGrey);
+}
+.teamPageWrapper img {
+  border-radius: 50%;
+  height: 60px;
+  margin-left: 5px;
+  margin-right: 20px;
+  vertical-align: middle;
+  width: 60px;
+}
+
+.sideways {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  padding: 10px 15px;
+}
+
+.updown {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+}
+
+.blurb {
+  font-size: 14px;
+  text-align: left;
+}
diff --git a/static-site/components/people/avatars.tsx b/static-site/components/people/avatars.tsx
index 29e9f8fbf..3090f337c 100644
--- a/static-site/components/people/avatars.tsx
+++ b/static-site/components/people/avatars.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./avatars.module.scss";
+import styles from "./avatars.module.css";
 import { TeamMember, teamMembers } from "./teamMembers";
 
 export function FooterTeamList(): React.ReactElement {
@@ -26,6 +26,47 @@ export function FooterTeamList(): React.ReactElement {
   );
 }
 
+export function TeamPageList({
+  membersKey,
+}: {
+  membersKey: string;
+}): React.ReactElement {
+  const people: TeamMember[] = teamMembers[membersKey];
+
+  return (
+    <div className={styles.teamPageWrapper}>
+      {people.map(
+        (person: TeamMember): React.ReactElement => (
+          <div
+            className={styles.sideways}
+            key={person.name}
+            style={{ alignItems: person.blurb ? "top" : "center" }}
+          >
+            <MaybeLinked link={person.link}>
+              <img
+                alt={person.name}
+                src={require("../../static/team/" + person.image).default.src}
+              />
+            </MaybeLinked>
+            <div className={styles.updown}>
+              <MaybeLinked link={person.link}>
+                <span style={{ whiteSpace: "nowrap" }}>{person.name}</span>
+              </MaybeLinked>
+              {person.blurb && (
+                <div className={styles.blurb}>{person.blurb}</div>
+              )}
+            </div>
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+function Comma(): React.ReactElement {
+  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
+}
+
 function MaybeLinked({
   link,
   children,
@@ -35,8 +76,3 @@ function MaybeLinked({
 }) {
   return link ? <a href={link}>{children}</a> : children;
 }
-
-function Comma(): React.ReactElement {
-  return <span style={{ marginLeft: "2px", marginRight: "2px" }}>,</span>;
-}
-
diff --git a/static-site/pages/team.jsx b/static-site/pages/team.jsx
deleted file mode 100644
index f09bcde6f..000000000
--- a/static-site/pages/team.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/team"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/team.jsx b/static-site/src/pages/team.jsx
deleted file mode 100644
index ef50843c1..000000000
--- a/static-site/src/pages/team.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import GenericPage from "../layouts/generic-page";
-import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
-import { CenteredFocusParagraph } from "../components/splash/styles";
-import { TeamPageList } from "../components/People/avatars";
-
-const H1 = styled.div`
-  text-align: center;
-  font-size: 32px;
-  line-height: 32px;
-  font-weight: 300;
-  color: ${(props) => props.theme.darkGrey};
-  min-width: 240px;
-  margin-top: 0px;
-  margin-bottom: 20px;
-`;
-
-const TeamPage = () => {
-  console.log("<TeamPage>");
-  return (
-    <div>
-      <H1>Nextstrain core team</H1>
-
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {"Nextstrain was co-founded by:"}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="founders" />
-
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {"The core team currently working on Nextstrain are:"}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="core" />
-
-      <H1>Nextstrain Alumni</H1>
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {`Our previous core Nextstrain team members, some of whom are still working on projects involving Nextstrain and/or maintaining specific analyses. `}
-          {"Beyond the core team there have been many code contributions from the wider scientific and programming community; please see "}
-          <a href="https://github.com/nextstrain">our GitHub organization</a>
-          {" to see the history of (code) contributions."}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <BigSpacer/>
-
-      <TeamPageList membersKey="alumni" />
-
-      <H1>Scientific Advisory Board</H1>
-      <FlexCenter>
-        <CenteredFocusParagraph>
-          {`In Oct 2023, a scientific advisory board was founded to provide guidance on future directions for the Nextstrain project.`}
-        </CenteredFocusParagraph>
-      </FlexCenter>
-
-      <TeamPageList membersKey="board" />
-    </div>
-  );
-};
-
-
-const Team = () => (
-  <GenericPage>
-    <TeamPage/>
-  </GenericPage>
-);
-
-export default Team;

From c7ddcea6d770bb0405fd90dc16a51f0eeb71d39e Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Tue, 22 Oct 2024 16:42:11 -0700
Subject: [PATCH 5/8] Add stub 'Splash' component [#134]

Note: the '404' page uses the same `<Splash />` component as the home
page. I currently need to port the '404' page to the App Router, to
resolve some test failures, but I do not want to get bogged down into
porting the `<Splash />` component right now. Instead, I am adding
this stub, which should allow the 404 page to load and (most
importantly) satisfy the test suite.

The full `<Splash />` component will be fully ported later, at which
point the older version of the component will be removed.
---
 static-site/components/splash/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 static-site/components/splash/index.tsx

diff --git a/static-site/components/splash/index.tsx b/static-site/components/splash/index.tsx
new file mode 100644
index 000000000..0c712ddc1
--- /dev/null
+++ b/static-site/components/splash/index.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Splash(): React.ReactElement {
+  return <h1>SPLASH PLACEHOLDER</h1>;
+}

From 4e5471b7b8aa3d0666b2ccfcc71cfdc94dcf1488 Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Tue, 22 Oct 2024 17:01:47 -0700
Subject: [PATCH 6/8] Convert '404' page to App Router [#134]

Also updates the 404 content test to match the new behavior of not
returning the full page.

Note: file renaming (`404.jsx` -> `not-found.tsx`) is because Next.js
App Router requires the latter name.

Note: old `pages/404.jsx` and `src/pages/404.jsx` are left in place
because the `ListResources` component depends on the `ErrorContainer`
style being exported from them. This will be addressed in a subsequent
commit.
---
 static-site/app/not-found.tsx               | 19 +++++++++++++++++++
 static-site/app/styles/globals.css          |  1 +
 static-site/app/styles/not-found.module.css | 10 ++++++++++
 test/requests.test.js                       |  2 +-
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 static-site/app/not-found.tsx
 create mode 100644 static-site/app/styles/not-found.module.css

diff --git a/static-site/app/not-found.tsx b/static-site/app/not-found.tsx
new file mode 100644
index 000000000..081d77610
--- /dev/null
+++ b/static-site/app/not-found.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+import Splash from "../components/splash";
+
+import styles from "./styles/not-found.module.css";
+
+export default function FourOhFour(): React.ReactElement {
+  return (
+    <>
+      <div className={styles.errorContainer}>
+        Oops - that page doesn’t exist! (404).
+        <br />
+        Here’s the splash page instead…
+      </div>
+
+      <Splash />
+    </>
+  );
+}
diff --git a/static-site/app/styles/globals.css b/static-site/app/styles/globals.css
index 15f1e374a..45dcbdc2f 100644
--- a/static-site/app/styles/globals.css
+++ b/static-site/app/styles/globals.css
@@ -15,6 +15,7 @@
 
   --blue: #5097ba;
   --darkGrey: #333;
+  --errorRed: #DE3C26;
   --mediumGrey: #888;
   --lightGrey: #ccc;
 
diff --git a/static-site/app/styles/not-found.module.css b/static-site/app/styles/not-found.module.css
new file mode 100644
index 000000000..7861eca27
--- /dev/null
+++ b/static-site/app/styles/not-found.module.css
@@ -0,0 +1,10 @@
+.errorContainer {
+  color: var(--errorRed);
+  font-size: 28px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0 80px;
+  text-align: center;
+}
diff --git a/test/requests.test.js b/test/requests.test.js
index 09b24e897..43bcf1c9c 100644
--- a/test/requests.test.js
+++ b/test/requests.test.js
@@ -328,7 +328,7 @@ function testBase404Page(path) {
     the 404 page, but nextstrain.org without JS is not feasible */
     test("body looks like 404 page", async () => {
       const res = await req;
-      expect((await res.text()).includes('"page":"/404"')).toBe(true)
+      expect((await res.text()).includes("Oops - that page doesn’t exist!")).toBe(true)
     });
   });
 }

From af8525151729c080a301efc9eb6ad30f76e31966 Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Thu, 24 Oct 2024 16:27:05 -0700
Subject: [PATCH 7/8] Add context for login state display in nav [#134]

* Add <UserDataWrapper> component to base layout to provide access to
  logged in user via React Context
* Wrap username or login link display into <UserOrLoginLink> Client
  Component; add to <Nav> component
---
 static-site/app/layout.tsx                    | 19 ++++---
 static-site/components/nav/index.tsx          |  5 +-
 .../components/nav/user-or-login-link.tsx     | 19 +++++++
 .../components/user-data-wrapper/index.tsx    | 53 +++++++++++++++++++
 4 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 static-site/components/nav/user-or-login-link.tsx
 create mode 100644 static-site/components/user-data-wrapper/index.tsx

diff --git a/static-site/app/layout.tsx b/static-site/app/layout.tsx
index 9397ff8e0..645b8cd9e 100644
--- a/static-site/app/layout.tsx
+++ b/static-site/app/layout.tsx
@@ -13,6 +13,7 @@ import {
   siteTitle,
   siteTitleAlt,
 } from "../data/BaseConfig";
+import UserDataWrapper from "../components/user-data-wrapper";
 
 import "./styles/browserCompatability.css";
 import "./styles/bootstrap.css";
@@ -68,17 +69,19 @@ export default function RootLayout({
         )}
       </head>
       <body className={lato.variable}>
-        <Nav />
-        <main>
-          {children}
+        <UserDataWrapper>
+          <Nav />
+          <main>
+            {children}
 
-          <Line />
+            <Line />
 
-          <Footer />
+            <Footer />
 
-          <BigSpacer />
-        </main>
-        <PlausibleAnalytics />
+            <BigSpacer />
+          </main>
+          <PlausibleAnalytics />
+        </UserDataWrapper>
       </body>
     </html>
   );
diff --git a/static-site/components/nav/index.tsx b/static-site/components/nav/index.tsx
index cb7d34b2a..0364a48b5 100644
--- a/static-site/components/nav/index.tsx
+++ b/static-site/components/nav/index.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { groupsApp } from "../../data/BaseConfig";
 
 import NavLogo from "./nav-logo";
+import UserOrLoginLink from "./user-or-login-link";
 
 import "./styles.css";
 
@@ -21,9 +22,7 @@ export default function Nav(): React.ReactElement {
           <a href="https://docs.nextstrain.org">DOCS</a>
           <a href="/contact">CONTACT</a>
           <a href="/blog/">BLOG</a>
-          {/* because we need access to the current context, this also
-          needs to be an encapsulated client component */}
-          {/* FIXME <UserOrLoginLink> */}
+          <UserOrLoginLink />
         </>
       )}
     </nav>
diff --git a/static-site/components/nav/user-or-login-link.tsx b/static-site/components/nav/user-or-login-link.tsx
new file mode 100644
index 000000000..d8c3bf721
--- /dev/null
+++ b/static-site/components/nav/user-or-login-link.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import React, { useContext } from "react";
+
+import { UserContext } from "../user-data-wrapper";
+
+export default function UserOrLoginLink(): React.ReactElement {
+  const { user } = useContext(UserContext);
+  return user ? (
+    <a href="/whoami">
+      <span role="img" aria-labelledby="userIcon">
+        👤
+      </span>
+      {` ${user.username}`}
+    </a>
+  ) : (
+    <a href="/login">LOGIN</a>
+  );
+}
diff --git a/static-site/components/user-data-wrapper/index.tsx b/static-site/components/user-data-wrapper/index.tsx
new file mode 100644
index 000000000..c86109688
--- /dev/null
+++ b/static-site/components/user-data-wrapper/index.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React, { createContext } from "react";
+
+type User = {
+  username: string;
+};
+
+type Group = {
+  isPublic: boolean;
+  name: string;
+};
+
+type UserState = {
+  user: null | User;
+  groupMemberships: Group[];
+};
+
+const initialState: UserState = {
+  user: null,
+  groupMemberships: [],
+};
+
+export const UserContext = createContext(initialState);
+
+export default class UserDataWrapper extends React.Component<
+  { children: React.ReactNode },
+  UserState
+> {
+  override state = initialState;
+
+  override componentDidMount(): void {
+    this.loadUser();
+  }
+
+  async loadUser(): Promise<void> {
+    const response = await fetch("/whoami", {
+      headers: { Accept: "application/json" },
+    });
+
+    const whoami: UserState = await response.json();
+
+    this.setState((state) => ({ ...state, ...whoami }));
+  }
+
+  override render(): React.ReactNode {
+    return (
+      <UserContext.Provider value={this.state}>
+        {this.props.children}
+      </UserContext.Provider>
+    );
+  }
+}

From c15a78d0daaa999da9a47834db5e89f672b4b42c Mon Sep 17 00:00:00 2001
From: John SJ Anderson <janders4@fredhutch.org>
Date: Thu, 24 Oct 2024 16:30:44 -0700
Subject: [PATCH 8/8] Convert 'whoami' page to App Router [#134]

Note: updates the page to use the default layout with the toolbar and
team avatars, in addition to the sponsor logos.
---
 static-site/app/whoami/page.tsx          | 54 +++++++++++++
 static-site/app/whoami/styles.module.css | 23 ++++++
 static-site/pages/whoami.jsx             |  3 -
 static-site/src/pages/whoami.jsx         | 99 ------------------------
 4 files changed, 77 insertions(+), 102 deletions(-)
 create mode 100644 static-site/app/whoami/page.tsx
 create mode 100644 static-site/app/whoami/styles.module.css
 delete mode 100644 static-site/pages/whoami.jsx
 delete mode 100644 static-site/src/pages/whoami.jsx

diff --git a/static-site/app/whoami/page.tsx b/static-site/app/whoami/page.tsx
new file mode 100644
index 000000000..da9285945
--- /dev/null
+++ b/static-site/app/whoami/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useContext } from "react";
+
+import { UserContext } from "../../components/user-data-wrapper";
+
+import styles from "./styles.module.css";
+
+// we don't export a metadata object here because react client
+// components aren't allowed to do that, and we need to be a client
+// component to get access to the user context
+
+export default function WhoAmI(): React.ReactElement {
+  const { user, groupMemberships } = useContext(UserContext);
+
+  return user ? (
+    <div className={styles.userContainer}>
+      You’re logged in as <strong>{user.username}</strong>.
+      <p className={styles.subText}>
+        You are a member of the following Nextstrain groups, which each contain
+        a collection of datasets and/or narratives:
+      </p>
+      Public:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      Private:
+      <ul className={styles.userGroupList}>
+        {groupMemberships
+          .filter((group) => !group.isPublic)
+          .map((group) => (
+            <li key={group.name}>
+              <a href={`/groups/${group.name}`}>{group.name}</a>
+            </li>
+          ))}
+      </ul>
+      <a href="/logout">Logout</a>
+    </div>
+  ) : (
+    <div className={styles.userContainer}>
+      <p>
+        You are not logged in.
+        <br />
+        <a href="/login">Login</a>
+      </p>
+    </div>
+  );
+}
diff --git a/static-site/app/whoami/styles.module.css b/static-site/app/whoami/styles.module.css
new file mode 100644
index 000000000..1f8b5c99a
--- /dev/null
+++ b/static-site/app/whoami/styles.module.css
@@ -0,0 +1,23 @@
+.userContainer {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0px 80px;
+  text-align: center;
+}
+
+.userContainer p {
+  padding-top: 20px;
+}
+
+.subText {
+  font-size: 18px;
+  line-height: var(--niceLineHeight);
+}
+
+.userGroupList {
+  display: table;
+  margin: 0 auto !important;
+}
diff --git a/static-site/pages/whoami.jsx b/static-site/pages/whoami.jsx
deleted file mode 100644
index 5a866c7c7..000000000
--- a/static-site/pages/whoami.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import dynamic from 'next/dynamic'
-const Index = dynamic(() => import("../src/pages/whoami"), {ssr: false})
-export default Index;
diff --git a/static-site/src/pages/whoami.jsx b/static-site/src/pages/whoami.jsx
deleted file mode 100644
index 8bbd6b8b2..000000000
--- a/static-site/src/pages/whoami.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, {Fragment, useContext} from "react";
-import styled from "styled-components";
-import UserDataWrapper, { UserContext } from "../layouts/userDataWrapper";
-import NavBar from '../components/nav-bar';
-import { Logos } from "../components/logos";
-import MainLayout from "../components/layout";
-
-const UserPage = () => {
-  const { user, groupMemberships } = useContext(UserContext);
-
-  const LoggedIn = () => (
-    <Fragment>
-      You&apos;re logged in as <strong>{user.username}</strong>.
-      <SubText>
-        You are a member of the following Nextstrain groups, which each
-        contain a collection of datasets and/or narratives:
-      </SubText>
-
-      Public:
-
-      <UserGroupsList>
-        {groupMemberships.filter((group) => group.isPublic).map((group) => (
-          <li key={group.name}>
-            <a href={`/groups/${group.name}`}>{group.name}</a>
-          </li>
-        ))}
-      </UserGroupsList>
-
-      Private:
-
-      <UserGroupsList>
-        {groupMemberships.filter((group) => !group.isPublic).map((group) => (
-          <li key={group.name}>
-            <a href={`/groups/${group.name}`}>{group.name}</a>
-          </li>
-        ))}
-      </UserGroupsList>
-      <a href="/logout">Logout</a>
-    </Fragment>
-  );
-
-  const LoggedOut = () => (
-    <p>
-      You are not logged in.<br />
-      <a href="/login">Login</a>
-    </p>
-  );
-
-  return (
-    <UserContainer>
-      {user
-        ? LoggedIn()
-        : LoggedOut()
-      }
-    </UserContainer>
-  );
-};
-
-const UserContainer = styled.div`
-  max-width: 640px;
-  padding: 130px 0px 80px 0px;
-  margin-top: 0px;
-  margin-right: auto;
-  margin-bottom: 0px;
-  margin-left: auto;
-  text-align: center;
-  font-size: 24px;
-  font-weight: 300;
-  line-height: ${(props) => 1.4 * props.theme.niceLineHeight};
-`;
-
-const SubText = styled.p`
-  line-height: ${(props) => props.theme.niceLineHeight};
-  font-size: 18px;
-`;
-
-const UserGroupsList = styled.ul`
-  display: table;
-  margin: 0 auto !important;
-`;
-
-const Users = () => {
-  console.log("<Users>");
-  return (
-    <MainLayout>
-      <div className="index-container">
-        <main>
-          <UserDataWrapper>
-            <NavBar />
-            <UserPage/>
-            <Logos />
-          </UserDataWrapper>
-        </main>
-      </div>
-    </MainLayout>
-  );
-};
-
-export default Users;