v1.2 - added react router

src/components/PageShell.tsx

@@ -0,0 +1,99 @@
+/* ═══════════════════════════════════════════════════════════════
+   PAGE SHELL
+   Just the chrome that makes pages look alike: a page header, then
+   sections with a thin accent banner between them, alternating
+   backgrounds, and a left-aligned heading with a blurb and rule.
+
+   Whatever goes inside a section is passed as `content` — the shell
+   doesn't care what it is.
+
+   No <main> and no footer here — Layout provides both, so a page
+   using this shell drops straight into the router's Outlet.
+
+   Usage:
+     <PageShell
+       title="Community"
+       intro="One line under the page title."
+       sections={[
+         {
+           id: "local",              // matches the nav hash, #local
+
+           title: "Local Chapters",
+           blurb: "Optional line under the section heading.",
+           accent: "#138ba0",        // heading, banner, rule
+           background: "#eef9fb",
+           actions: <SomeButton />,  // optional, right of the heading
+           content: <YourStuff />,
+         },
+       ]}
+     />
+   ═══════════════════════════════════════════════════════════════ */
+
+const TEAL = "#138ba0";
+
+export function Section({ section }) {
+  const {
+    id,
+    title,
+    blurb,
+    accent,
+    background,
+    // Optional action bar for this section's heading row — a view
+    // toggle, a filter, a link. Whatever the section needs; the
+    // shell just gives it a place to sit.
+    actions,
+    content,
+  } = section;
+
+  return (
+    <section
+      id={id}
+      className="py-20"
+      style={{ background, scrollMarginTop: "5rem" }}
+    >
+      {/* Heading — left aligned, optional actions on the right */}
+      <div className="max-w-6xl mx-auto px-6 mb-10">
+        <div className="flex flex-wrap items-end justify-between gap-4">
+          <div>
+            <h2 className="text-4xl md:text-5xl font-800" style={{ color: accent }}>
+              {title}
+            </h2>
+            {blurb && <p className="mt-2 text-[#4a6b72] max-w-xl">{blurb}</p>}
+          </div>
+          {actions}
+        </div>
+        <div className="mt-6 h-px w-full" style={{ background: accent, opacity: 0.35 }} />
+      </div>
+
+      {content}
+    </section>
+  );
+}
+
+export default function PageShell({ title, intro, sections }) {
+  return (
+    <>
+      {/* Page header */}
+      <div className="pt-24 pb-12 px-6" style={{ background: "#eef9fb" }}>
+        <div className="max-w-6xl mx-auto">
+          <h1 className="text-5xl md:text-6xl font-800" style={{ color: TEAL }}>
+            {title}
+          </h1>
+          {intro && <p className="mt-3 text-lg text-[#4a6b72] max-w-2xl">{intro}</p>}
+        </div>
+      </div>
+
+      {sections.map((section, i) => (
+        <div key={section.id}>
+          {/* Thin solid banner between sections */}
+          <div className="h-2" style={{ background: section.accent }} />
+          <Section section={section} />
+          {i === sections.length - 1 && (
+            <div className="h-2" style={{ background: section.accent }} />
+          )}
+        </div>
+      ))}
+
+    </>
+  );
+}