redesign the homepage

2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
@@ -0,0 +1,18 @@
+.nav ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+  font-size: var(--type-label-size);
+}
+.separator {
+  color: var(--text-subdued);
+}
@@ -0,0 +1,39 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import { Icon } from '@/components/foundation/Icon';
+import styles from './Breadcrumbs.module.css';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export function Breadcrumbs({ label, items }: { label: string; items: BreadcrumbItem[] }) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ol>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+          return (
+            <li key={`${item.label}-${index}`}>
+              {index > 0 ? (
+                <Icon
+                  name="chevron-forward"
+                  size="sm"
+                  directionBehavior="mirror"
+                  className={styles.separator}
+                />
+              ) : null}
+              {item.href && !current ? (
+                <ActionLink href={item.href} variant="inline">
+                  {item.label}
+                </ActionLink>
+              ) : (
+                <span aria-current={current ? 'page' : undefined}>{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
@@ -0,0 +1,11 @@
+.group h2 {
+  margin: 0;
+  font-size: var(--type-body-size);
+}
+.group ul {
+  display: grid;
+  gap: var(--space-2);
+  margin: var(--space-3) 0 0;
+  padding: 0;
+  list-style: none;
+}
@@ -0,0 +1,30 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './FooterLinkGroup.module.css';
+
+export interface FooterLinkItem {
+  id: string;
+  label: string;
+  href?: string;
+  disabledReason?: string;
+}
+
+export function FooterLinkGroup({ title, links }: { title: string; links: FooterLinkItem[] }) {
+  return (
+    <section className={styles.group}>
+      <h2>{title}</h2>
+      <ul>
+        {links.map((link) => (
+          <li key={link.id}>
+            <ActionLink
+              href={link.href ?? '/'}
+              variant="muted"
+              {...(link.disabledReason ? { disabledReason: link.disabledReason } : {})}
+            >
+              {link.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
@@ -0,0 +1,20 @@
+.nav {
+  overflow-x: auto;
+  border-block-end: 1px solid var(--border-standard);
+}
+.nav ul {
+  display: flex;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  gap: var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nav a {
+  border-block-end: 3px solid transparent;
+}
+.nav a[aria-current='location'] {
+  border-block-end-color: var(--interactive-primary);
+  color: var(--text-primary);
+}
@@ -0,0 +1,35 @@
+import { ActionLink } from '@/components/actions/ActionLink';
+import styles from './SectionNavigation.module.css';
+
+export interface SectionNavigationItem {
+  id: string;
+  label: string;
+  href: string;
+  current?: boolean;
+}
+
+export function SectionNavigation({
+  label,
+  items,
+}: {
+  label: string;
+  items: SectionNavigationItem[];
+}) {
+  return (
+    <nav aria-label={label} className={styles.nav}>
+      <ul>
+        {items.map((item) => (
+          <li key={item.id}>
+            <ActionLink
+              href={item.href}
+              variant="navigation"
+              aria-current={item.current ? 'location' : undefined}
+            >
+              {item.label}
+            </ActionLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}