manual save(2026-01-22 18:52)

src/components/SectionShell.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+type HeadingTag = 'h1' | 'h2'
+
+export type SectionShellProps = {
+  sectionKey: string
+  title: string
+  lead?: string
+  headingAs?: HeadingTag
+  notes?: string[]
+  children?: React.ReactNode
+}
+
+export const SectionShell: React.FC<SectionShellProps> = ({
+  sectionKey,
+  title,
+  lead,
+  headingAs = 'h2',
+  notes,
+  children,
+}) => {
+  const Heading = headingAs
+
+  return (
+    <section aria-labelledby={sectionKey} className="py-12">
+      <div className="container mx-auto px-4">
+        <div className="max-w-3xl">
+          <Heading id={sectionKey} className="text-2xl font-semibold text-gray-900 tracking-tight">
+            {title}
+          </Heading>
+          {lead ? <p className="mt-3 text-gray-600 leading-relaxed">{lead}</p> : null}
+
+          {notes?.length ? (
+            <ul className="mt-5 space-y-1 text-sm text-gray-500 list-disc pl-5">
+              {notes.map((note) => (
+                <li key={note}>{note}</li>
+              ))}
+            </ul>
+          ) : null}
+
+          {children ? <div className="mt-6">{children}</div> : null}
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/SiteLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Outlet, ScrollRestoration } from 'react-router-dom'
+import { Header } from './Header'
+import { Footer } from './Footer'
+
+export const SiteLayout: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-white text-gray-900">
+      <Header />
+      <main id="main" className="bg-gray-50">
+        <Outlet />
+      </main>
+      <Footer />
+      <ScrollRestoration />
+    </div>
+  )
+}