feature/383 splash page

apps/spotlight/package.json

@@ -20,6 +20,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.0",
+    "sharp": "^0.33.5",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

apps/spotlight/src/components/Footer.astro

@@ -1,5 +1,7 @@
 ---
 import { type GithubRepository, getBranchTreeUrl } from '../lib/github.js';
+import { Image } from 'astro:assets';
+import { getPublicDirUrl } from '../routes';
 
 type Props = {
   github: GithubRepository;
@@ -8,35 +10,139 @@ type Props = {
 const { github } = Astro.props;
 ---
 
-<footer class="usa-footer usa-footer--slim">
-  <div class="grid-container usa-footer__return-to-top">
-    <a href="#">Return to top</a>
-  </div>
-  <div class="usa-footer__primary-section">
-    <div class="usa-footer__primary-container grid-row">
-      <div class="mobile-lg:grid-col-8">
-        <nav class="usa-footer__nav" aria-label="Footer navigation,">
-          <ul class="grid-row grid-gap">
-            <li
-              class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
-            >
-              <a class="usa-footer__primary-link" href="https://10x.gsa.gov/">
-                10x
-              </a>
-            </li>
-            <li
-              class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content"
-            >
-              <a
-                class="usa-footer__primary-link"
+<footer id="footer" class="usa-footer">
+  <div class="usa-identifier usa-footer__primary padding-bottom-0">
+    <div class="grid-container usa-footer__primary-content maxw-desktop">
+      <div class="grid-row padding-top-0 padding-bottom-3">
+        <div class="GSAFooter">
+          <section
+            aria-label="Agency identifier,"
+            class="usa-identifier__section usa-identifier__section--masthead"
+          >
+            <div class="align-center display-flex maxw-desktop">
+              <div class="usa-identifier__logos">
+                <a
+                  href="https://gsa.gov"
+                  class="usa-identifier__logo GSAFooter__logo"
+                >
+                  <Image
+                    src=`${getPublicDirUrl()}images/gsa-logo.svg`
+                    alt="GSA.gov home."
+                    width="60"
+                    height="60"
+                  />
+                </a>
+              </div>
+              <div
+                class="usa-identifier__identity"
+                aria-label="Agency description"
+              >
+                <p class="usa-identifier__identity-domain">10x Forms Platform</p>
+                <p class="usa-identifier__identity-disclaimer">
+                  An official website of the
+                  <a href="https://gsa.gov/tts"
+                    >Technology Transformation Services</a
+                  >
+                </p>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+      <nav
+        aria-label="Important links,"
+        class="usa-identifier__section usa-identifier__section--required-links"
+      >
+        <div class="align-center display-flex maxw-desktop">
+          <ul class="usa-identifier__required-links-list">
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/about-us"
+                class="usa-identifier__required-link usa-link"
+                >About GSA</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/vulnerability-disclosure-policy"
+                class="usa-identifier__required-link usa-link"
+                >Vulnerability Disclosure Policy</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/website-information/accessibility-statement"
+                class="usa-identifier__required-link usa-link"
+                >Accessibility statement</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/reference/freedom-of-information-act-foia"
+                class="usa-identifier__required-link usa-link"
+                >FOIA requests</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
+                class="usa-identifier__required-link usa-link"
+                >No FEAR Act data</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsaig.gov/"
+                class="usa-identifier__required-link usa-link"
+                >Office of the Inspector General</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="https://www.gsa.gov/reference/reports/budget-performance"
+                class="usa-identifier__required-link usa-link"
+                >Performance reports</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="/privacy-policy/"
+                class="usa-identifier__required-link usa-link"
+                >Privacy policy</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
+                href="mailto:[email protected]"
+                class="usa-identifier__required-link usa-link"
+                rel="noopener noreferrer"
+                target="_blank"
+                >Email Us</a
+              >
+            </li>
+            <li class="usa-identifier__required-links-item">
+              <a
                 href={getBranchTreeUrl(github, true)}
+                class="usa-identifier__required-link usa-link"
+                rel="noopener noreferrer"
+                target="_blank"
+                >Github</a
               >
-                Github repository
-              </a>
             </li>
           </ul>
-        </nav>
-      </div>
+        </div>
+      </nav>
     </div>
+    <section
+      aria-label="U.S. government information and services,"
+      class="usa-identifier__section usa-identifier__section--usagov margin-top-105 padding-bottom-105 maxw-desktop grid-container"
+    >
+        <div class="align-center display-flex maxw-desktop">
+          <div class="usa-identifier__usagov-description">
+            Looking for U.S. government information and services?&nbsp;
+          </div>
+          <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
+        </div>
+    </section>
   </div>
 </footer>

apps/spotlight/src/components/Header.astro

@@ -1,8 +1,8 @@
 ---
 import closeSvg from '@atj/design/static/uswds/img/usa-icons/close.svg';
-import logoSvg from '@atj/design/images/logo.svg';
-
 import * as routes from '../routes';
+import { Image } from 'astro:assets';
+import { getPublicDirUrl } from '../routes';
 
 const getNavLinkClasses = (url: string) => {
   if (url === Astro.url.pathname) {
@@ -11,28 +11,39 @@ const getNavLinkClasses = (url: string) => {
     return 'usa-nav-link';
   }
 };
+
+const currentRoute = Astro.url.href;
+const isAboutContent = currentRoute.includes(`/about/`);
+const showAboutContent = false;
 ---
 
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--extended">
-  <div class="topHeaderBanner bg-yellow">
-    <span class="usa-navbar height-auto display-block padding-2"
+  {!isAboutContent && (
+    <div class="topHeaderBanner bg-yellow">
+      <span class="usa-navbar height-auto display-block padding-2"
       ><strong>STAGING SERVER</strong> - No changes you make here will be visible
-      to the public.</span
-    >
-  </div>
-  <div class="bg-base-darkest">
-    <div class="usa-navbar">
-      <div class="usa-logo">
-        <em class="usa-logo__text">
-          <a href={routes.getHomeUrl()} title="10x Access to Justice">
-            <img src={logoSvg.src} role="img" alt="10x Logo" />
-            <span class="text-white">A2J Forms</span>
-          </a>
-        </em>
-      </div>
-      <button type="button" class="usa-menu-btn">Menu</button>
+        to the public.</span
+      >
     </div>
+  )}
+  <div class="usa-navbar">
+    <div class="usa-logo">
+      <em class="usa-logo__text">
+        <a href={routes.getHomeUrl()} title="10x Forms Platform">
+          <Image
+            src=`${getPublicDirUrl()}images/10x-logo.svg`
+            alt="10x Forms Platform home"
+            width="72"
+            height="34"
+            loading="eager"
+            decoding="sync"
+          />
+          Forms Platform
+        </a>
+      </em>
+    </div>
+    <button type="button" class="usa-menu-btn">Menu</button>
   </div>
   <nav aria-label="Primary navigation" class="usa-nav">
     <div class="usa-nav__inner">
@@ -44,17 +55,38 @@ const getNavLinkClasses = (url: string) => {
           <a
             href={routes.getHomeUrl()}
             class={getNavLinkClasses(routes.getHomeUrl())}
-            ><span>My Forms</span></a
           >
+            <span>My Forms</span>
+          </a>
         </li>
+        {showAboutContent && (
+          <li class="usa-nav__primary-item">
+            <a
+              href={routes.getAboutUrl()}
+              class={getNavLinkClasses(routes.getAboutUrl())}
+            >
+              <span>About</span>
+            </a>
+          </li>
+        )}
         <li class="usa-nav__primary-item">
           <a
             href={routes.getStorybookUrl()}
             class={getNavLinkClasses(routes.getStorybookUrl())}
-            ><span>Storybook</span></a
           >
+            <span>Storybook</span>
+          </a>
         </li>
       </ul>
+      {showAboutContent && (
+        <div class="usa-nav__secondary">
+          <ul class="usa-nav__secondary-links">
+            <li class="usa-nav__secondary-item">
+              <button class="usa-button">Login</button>
+            </li>
+          </ul>
+        </div>
+      )}
     </div>
   </nav>
 </header>