feat(home): fix learn-more grid, link About to flexion.us, remove /about/

Three review fixes rolled into one:

- The Learn more grid defined itself as a `container-type: inline-size`
  container, so the nested `@container (min-width: 48rem)` column rule
  could never match against its own container. Swap to a media query at
  48rem so the two teasers lay out horizontally on desktop.
- The "Learn about Flexion" teaser now links to https://flexion.us/
  instead of the local /about/ page.
- Remove the /about/ page entirely: delete content/about.md and
  src/pages/about.tsx, drop the route from allRoutes, drop About from
  header and footer nav, and update smoke, a11y, home, and routes tests
  to match.

Author: danielnaab

content/about.md

@@ -2,7 +2,7 @@
 
 ## Purpose
 
-First impression for every visitor. Introduces Flexion Labs with a hero, showcases the three Flexion Solutions offerings as featured labs, and hands visitors off to the commitment and about pages.
+First impression for every visitor. Introduces Flexion Labs with a hero, showcases the three Flexion Solutions offerings as featured labs, and hands visitors off to the commitment page and to flexion.us.
 
 ## Inputs
 
@@ -14,7 +14,7 @@ First impression for every visitor. Introduces Flexion Labs with a hero, showcas
 
 - **When the page loads, then** the hero renders the `title` as `<h1>`, the `subtitle` as a tagline paragraph, and the rendered `intro` HTML as the intro block.
 - **When there are featured labs, then** one `LabCard` is rendered per lab in `order` ascending.
-- **When the page loads, then** a "Learn more" section renders two teasers linking to `/commitment/` and `/about/` respectively.
+- **When the page loads, then** a "Learn more" section renders two side-by-side teasers — one linking to `/commitment/`, one linking to `https://flexion.us/`. The grid collapses to a single column below 48rem.
 - **The stats strip is not rendered.** The catalog directory is disabled in this pass.
 
 ## Fallbacks

docs/views/home.md

@@ -11,7 +11,6 @@ import { WorkIndex } from '../pages/work/index'
 import { WorkDetail } from '../pages/work/detail'
 import { Health } from '../pages/work/health'
 import { Commitment } from '../pages/commitment'
-import { About } from '../pages/about'
 import { DesignSystem } from '../pages/design-system'
 import { SHOW_PER_REPO_FAILURES } from '../catalog/repo-checks'
 
@@ -41,7 +40,6 @@ export async function buildSite(options: BuildOptions): Promise<void> {
   const commitmentBody = await loadContentBody(
     join(rootDir, 'content', 'commitment.md'),
   )
-  const aboutBody = await loadContentBody(join(rootDir, 'content', 'about.md'))
 
   const routes = allRoutes(catalog)
 
@@ -52,7 +50,6 @@ export async function buildSite(options: BuildOptions): Promise<void> {
       hero,
       featured,
       commitmentBody,
-      aboutBody,
       config,
       now,
     )
@@ -87,7 +84,6 @@ async function render(
   hero: Awaited<ReturnType<typeof loadHero>>,
   featured: Awaited<ReturnType<typeof loadFeatured>>,
   commitmentBody: string,
-  aboutBody: string,
   config: { basePath: string; buildTime: string },
   now: Date,
 ): Promise<string> {
@@ -107,8 +103,6 @@ async function render(
       )
     case 'commitment':
       return renderToHtml(<Commitment body={commitmentBody} config={config} />)
-    case 'about':
-      return renderToHtml(<About body={aboutBody} config={config} />)
     case 'design-system':
       return renderToHtml(<DesignSystem config={config} />)
     case 'work-detail': {

src/build/entry.tsx

@@ -2,7 +2,7 @@ import type { Catalog } from '../catalog/types'
 
 export type Route = {
   path: string // always starts with "/" and ends with "/"
-  view: 'home' | 'work-index' | 'work-detail' | 'health' | 'commitment' | 'about' | 'design-system'
+  view: 'home' | 'work-index' | 'work-detail' | 'health' | 'commitment' | 'design-system'
   slug?: string
 }
 
@@ -16,7 +16,6 @@ export function allRoutes(catalog: Catalog): Route[] {
     // { path: '/work/', view: 'work-index' },
     // { path: '/work/health/', view: 'health' },
     { path: '/commitment/', view: 'commitment' },
-    { path: '/about/', view: 'about' },
     { path: '/design-system/', view: 'design-system' },
   ]
   // for (const entry of catalog) {

src/build/routes.ts

@@ -8,7 +8,6 @@ export function Footer({ config }: { config: SiteConfig }) {
         <ul>
           <li><a href={url('/', config.basePath)}>Home</a></li>
           <li><a href={url('/commitment/', config.basePath)}>Commitment</a></li>
-          <li><a href={url('/about/', config.basePath)}>About</a></li>
           <li><a href={url('/design-system/', config.basePath)}>Design system</a></li>
         </ul>
       </nav>

src/design/components/footer/index.tsx

@@ -34,9 +34,6 @@ export function Header({ config }: { config: SiteConfig }) {
           <li>
             <a href={url('/commitment/', config.basePath)}>Commitment</a>
           </li>
-          <li>
-            <a href={url('/about/', config.basePath)}>About</a>
-          </li>
           <li>
             <Link href="https://github.com/flexion" external>
               GitHub

src/design/components/header/index.tsx

@@ -89,7 +89,6 @@
   .home-learn-more__grid {
     display: grid;
     gap: var(--space-5);
-    container-type: inline-size;
     margin-block-start: var(--space-4);
   }
   .home-learn-more__item {
@@ -102,14 +101,16 @@
     font-size: var(--step-1);
     margin-block-end: var(--space-2);
   }
+  @media (min-width: 48rem) {
+    .home-learn-more__grid { grid-template-columns: repeat(2, 1fr); }
+  }
   .work-index__featured-grid {
     display: grid;
     gap: var(--space-5);
     container-type: inline-size;
   }
   @container (min-width: 48rem) {
     .work-index__featured-grid { grid-template-columns: repeat(2, 1fr); }
-    .home-learn-more__grid { grid-template-columns: repeat(2, 1fr); }
   }
   @container (min-width: 72rem) {
     .work-index__list { grid-template-columns: repeat(3, 1fr); }

src/design/layout.css

@@ -61,7 +61,7 @@ export function Home({
             <h3>About Flexion</h3>
             <p>{hero.learnMore.about}</p>
             <p>
-              <a href={url('/about/', config.basePath)}>Learn about Flexion &rarr;</a>
+              <a href="https://flexion.us/" rel="noopener external">Learn about Flexion &rarr;</a>
             </p>
           </article>
         </div>

src/pages/about.tsx

@@ -8,7 +8,6 @@ const DIST = join(process.cwd(), 'dist')
 const pages = [
   'index.html',
   'commitment/index.html',
-  'about/index.html',
   'design-system/index.html',
 ]