redesign the homepage

apps/homepage/src/components/surfaces/Callout.module.css

@@ -0,0 +1,16 @@
+.callout {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border-inline-start: 4px solid var(--interactive-primary);
+  background: var(--status-info-surface);
+  color: var(--status-info-text);
+}
+.callout strong {
+  display: block;
+  margin-block-end: var(--space-1);
+}
+.callout :last-child {
+  margin-block-end: 0;
+}

apps/homepage/src/components/surfaces/Callout.tsx

@@ -0,0 +1,23 @@
+import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
+import type { ReactNode } from 'react';
+import styles from './Callout.module.css';
+
+export function Callout({
+  icon = 'info',
+  title,
+  children,
+}: {
+  icon?: ApprovedIconName;
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <aside className={styles.callout}>
+      <Icon name={icon} size="lg" />
+      <div>
+        <strong>{title}</strong>
+        <div>{children}</div>
+      </div>
+    </aside>
+  );
+}

apps/homepage/src/components/surfaces/Card.module.css

@@ -0,0 +1,50 @@
+.card {
+  min-inline-size: 0;
+  border: 1px solid var(--border-standard);
+  border-radius: var(--radius-md);
+}
+.default {
+  background: var(--surface-primary);
+}
+.muted {
+  background: var(--surface-muted);
+}
+.elevated {
+  background: var(--surface-elevated);
+  box-shadow: var(--shadow-card);
+}
+.strong {
+  background: var(--surface-strong);
+}
+.none {
+  padding: 0;
+}
+.compact {
+  padding: var(--space-4);
+}
+.comfortable {
+  padding: var(--space-6);
+}
+.spacious {
+  padding: clamp(var(--space-6), 5vw, var(--space-10));
+}
+.interactive {
+  transition:
+    border-color var(--duration-fast) var(--easing-productive),
+    transform var(--duration-fast) var(--easing-productive);
+}
+.interactive:hover {
+  border-color: var(--interactive-primary);
+  transform: translateY(-2px);
+}
+.interactive:focus-within {
+  border-color: var(--focus-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+  .interactive {
+    transition: none;
+  }
+  .interactive:hover {
+    transform: none;
+  }
+}

apps/homepage/src/components/surfaces/Card.tsx

@@ -0,0 +1,43 @@
+import { classNames } from '@/lib/components/classNames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import styles from './Card.module.css';
+
+export type SurfaceTone = 'default' | 'muted' | 'elevated' | 'strong';
+export type SurfacePadding = 'none' | 'compact' | 'comfortable' | 'spacious';
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+  as?: 'article' | 'section' | 'div';
+  tone?: SurfaceTone;
+  padding?: SurfacePadding;
+  interactive?: boolean;
+  children: ReactNode;
+}
+
+export function Card({
+  as: Component = 'article',
+  tone = 'default',
+  padding = 'comfortable',
+  interactive = false,
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <Component
+      className={classNames(
+        styles.card,
+        styles[tone],
+        styles[padding],
+        interactive && styles.interactive,
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+}
+
+export function Panel(props: Omit<CardProps, 'as'>) {
+  return <Card as="section" {...props} />;
+}