0 ? "h-[6.75rem]" : "h-[4.5rem]"} />
-
- {/* Mobile menu */}
- {mobileMenuOpen && (
-
- {/* Floating doves */}
-
-
- {/* #About ─────────────────────────────────────── */}
-
-
- {/* #Events ─────────────────────────────────────────────── */}
-
-
- {/* #Connect -------------------------------------------- */}
-
-
-
- {/* ── FOOTER ─ Using #042f3a for BG ───────────────────────────────────── */}
-
-
+
-
-
-
- )}
-
- {/* ── HERO/ABOUT ─────────────────────────────────────────────── */}
-
- {PAGE_LINKS.map((page) => {
- const pageSections = PAGE_SECTIONS[page.tab] ?? [];
- const isActive = activeTab === page.tab;
-
- return (
-
-
- setMobileMenuOpen(false)}
- >
- Give
-
-
-
-
- {/* Sections nest under the page they belong to */}
- {isActive && pageSections.length > 0 && (
-
- );
- })}
-
- {pageSections.map((section) => (
- setMobileMenuOpen(false)}
- >
- {section.label}
-
- ))}
-
- )}
-
-
- Next Generation
-
-
-
- Next Generation
-
-
-
- - A young-adult focused community ministy focused on supporting individuals in Unity Ministries from 18-40 years old. Rooted in spiritual growth, leadership development, and sacred service. -
-- We are the future of the Unity Movement. -
- - -
-
-
- A Ministry Designed For
-
-
- A Ministry Designed For
Young Adults
- - NGU exists to connect young adults across Unity ministries and create spaces for authentic spiritual exploration, community, and conscious living. -
-
- {[
- { title: "Spiritual Community", icon: "🕊️", desc: "We welcome all adults under 40 no matter where you are on your journey. Our community thrives on diversity of thought, background, and belief." },
- { title: "Conscious Development", icon: "🌱", desc: "Through workshops, retreats, and gatherings, we cultivate minds and spirits ready to engage with life's deepest questions." },
- { title: "Connected Network", icon: "🌐", desc: "NGU spans regions nationwide. From local chapter small group ministry to regional and national gatherings and retreats, you're never that far away from your people." },
- ].map((card) => (
-
-
-
- ))}
- {card.icon}
- {card.title}
-{card.desc}
-
-
-
- {/* Carousel — full-bleed so neighbors can peek in from the screen edges */}
-
-
- - {isPast ? "Past Events" : "Upcoming Events"} -
-
- {/* Masked viewport: everything outside the fade gradient is invisible */}
-
-
-
- {/* Sliding track */}
-
-
- {/* Arrows — outside the masked element so they never fade */}
-
-
-
- {EVENTS.map((ev, i) => {
- const active = i === index;
- const past = ev.status === "past";
- const color = ev.color || TEAL;
- return (
-
- !active && setIndex(i)}
- aria-hidden={!active}
- >
-
- );
- })}
-
-
-
-
-
-
-
- {ev.desc_a &&
- 
-
- {ev.title}
- {ev.theme && ( -"{ev.theme}"
- )} -{ev.date}
-{ev.location}
-
- {ev.image && (
- 
- )}
-
- {ev.desc_a}
} - {ev.desc_b &&{ev.desc_b}
} - - {ev.links.length > 0 ? ( -
- {ev.links.map(item => (
-
- {item.label}
-
- ))}
-
- ) : (
- past ? (
- - This event has concluded, thank you to everyone who joined us! -
- ) : ( - <> -- Registration has not opened yet, follow our instagram for more details. -
- -
- {/* Dot indicators */}
-
-
- {EVENTS.map((e, i) => (
-
-
- - · More events coming soon, stay connected for announcements · -
-
-
-
-
-
- - Ready to Connect? -
-Find your place in the NGU community
-
- {[
- { label: "Volunteer", desc: "Help create transformative experiences for young adults", link:"https://ngu.churchcenter.com/people/forms/1176908"},
- { label: "Membership", desc: "Become an official member of the NGU community", link:"https://ngu.churchcenter.com/people/forms/1135816"},
- { label: "Affiliation Form", desc: "Affiliate your ministry or spiritual organization with NGU", link:"https://ngu.churchcenter.com/people/forms/1135750"},
- { label: "Speaker & Musician Directory", desc: "Join our network of speakers, musicians, and facilitators", link:"https://ngu.churchcenter.com/people/forms/1173181"},
- ].map(item => (
-
-
-
-
-
- {/* Arrow */}
-
-
- ))}
- {item.label}
-{item.desc}
-
-
-
-
- 📅 View NGU Calendar
-
-
-
-
-
-
- {showCalendar && (
-
-
-
- )}
-
+
+ );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..a4ea3a2
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,176 @@
+import { Link } from "react-router-dom";
+import { PAGE_LINKS, PAGE_SECTIONS, NAV_ACTIONS } from "../navConfig.js";
+import nguLogo from "../assets/NGU_Logo.svg";
+
+const InstagramIcon = ({ id = "ig-gradient" }) => (
+
+);
+
+const FacebookIcon = () => (
+
+);
+
+const DiscordIcon = () => (
+
+);
+
+const Social_Links = [
+ { label: "Instagram", href: "https://www.instagram.com/nextgenerationunity/", Icon: InstagramIcon },
+ { label: "Facebook", href: "https://www.facebook.com/NextGenerationofUnity", Icon: FacebookIcon },
+ { label: "Discord", href: "https://discord.com/invite/AtngzpqaX5", Icon: DiscordIcon },
+];
+
+// Give's destination lives in navConfig so the footer and the nav can't drift.
+// Only the label differs down here.
+const giveAction = NAV_ACTIONS.find((a) => a.variant === "fancy");
+
+const Get_In_Touch = [
+ { label: "Feedback", to: "/feedback"},
+ { label: "Contact Us", to: "/leadership#contact" },
+];
+
+const Footer_Links = [
+ { label: "Privacy Policy", to: "/privacy" },
+ { label: "Terms of Service", to: "/terms" },
+];
+
+const footerLinkClass =
+ "text-white/40 hover:text-[#aac992] text-sm transition-colors";
+
+const pageLinkClass =
+ "text-white/80 hover:text-[#aac992] text-sm font-semibold transition-colors";
+
+const sectionLinkClass =
+ "text-white/45 hover:text-[#aac992] text-sm transition-colors";
+
+const headingClass = "text-white/90 text-sm font-semibold mb-4";
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..2073f0a
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,325 @@
+import { useState, useEffect, useRef } from "react";
+import { NavLink, Link, Outlet, useLocation } from "react-router-dom";
+import { PAGE_LINKS, PAGE_SECTIONS, NAV_ACTIONS } from "../navConfig.js";
+import Banner from "./Banner.jsx";
+import nguLogo from "../assets/NGU_Logo.svg";
+import Footer from "./Footer.tsx";
+
+/* ── Right-side nav actions ──────────────────────────────── */
+
+type NavActionItem = {
+ label: string;
+ to: string;
+ variant: string;
+ external?: boolean;
+};
+
+const ACTION_VARIANTS: Record<
+ string,
+ { className: string; style: React.CSSProperties }
+> = {
+ ghost: {
+ className:
+ "font-semibold border border-white/30 text-white/85 hover:border-white/60 hover:text-white hover:bg-white/10",
+ style: {},
+ },
+ fancy: {
+ className: "font-bold text-white hover:scale-105",
+ style: { background: "linear-gradient(135deg, #008fa8, #88b668)" },
+ },
+};
+
+const ACTION_SIZES = {
+ desktop: "px-5 py-2 text-sm leading-relaxed",
+ mobile: "px-8 py-3 text-lg",
+};
+
+function NavAction({
+ item,
+ size = "desktop",
+ onClick,
+}: {
+ item: NavActionItem;
+ size?: keyof typeof ACTION_SIZES;
+ onClick?: () => void;
+}) {
+ const v = ACTION_VARIANTS[item.variant] ?? ACTION_VARIANTS.ghost;
+ const className = `inline-block whitespace-nowrap rounded-full transition-all duration-200 ${ACTION_SIZES[size]} ${v.className}`;
+
+ return item.external ? (
+
+ {item.label}
+
+ ) : (
+
+ {item.label}
+
+ );
+}
+
+const navActions = NAV_ACTIONS as NavActionItem[];
+
+/* ── Layout ──────────────────────────────────────────────── */
+
+export default function Layout() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+ const [activeSection, setActiveSection] = useState+ {SITE_BANNER.content.map((part, i) => { + if (!part.href) return {part.text}; + return part.external ? ( + + {part.text} + + ) : ( + + {part.text} + + ); + })} +
+ + {SITE_BANNER.dismissible && ( + + )} +
+
+ {/* ── NAV ─────────────────────────────────────────────── */}
+
+
+ {/* Tier 0 — site-wide announcement */}
+
+
+ {/* Keeps page content clear of the fixed header */}
+
+
+ {/* Page content */}
+
+
+
+ {/*Site Footer applied to every page*/}
+
+
+ {/* Mobile menu */}
+ {mobileMenuOpen && (
+
+ );
+}
diff --git a/src/components/PageShell.tsx b/src/components/PageShell.tsx
new file mode 100644
index 0000000..63ce434
--- /dev/null
+++ b/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
+
+
+
+ )}
+
+
+ {PAGE_LINKS.map((page) => {
+ const pageSections = PAGE_SECTIONS[page.path] ?? [];
+ const isActive = location.pathname === page.path;
+
+ return (
+
+
+
+
+ `block text-2xl font-bold py-3 transition-colors ${
+ isActive ? "text-[#aac992]" : "text-white hover:text-[#10d48a]"
+ }`
+ }
+ >
+ {page.label}
+
+
+ {/* Sections nest under the page they belong to */}
+ {isActive && pageSections.length > 0 && (
+
+ );
+ })}
+
+ {pageSections.map((section) => (
+ setMobileMenuOpen(false)}
+ >
+ {section.label}
+
+ ))}
+
+ )}
+
+ {navActions.map((item) => (
+ setMobileMenuOpen(false)}
+ />
+ ))}
+
+
+
+
+ {content}
+
+
+
+
+
+ {actions}
+ + {title} +
+ {blurb &&{blurb}
} +
+
+
+ {sections.map((section, i) => (
+
+
+ + {title} +
+ {intro &&{intro}
} +
+ {/* Thin solid banner between sections */}
+
+
+ {i === sections.length - 1 && (
+
+ )}
+
+ ))}
+
+
+ );
+}
diff --git a/src/events.js b/src/events.js
new file mode 100644
index 0000000..06a49ce
--- /dev/null
+++ b/src/events.js
@@ -0,0 +1,297 @@
+/* ═══════════════════════════════════════════════════════════════
+ EVENT DATA
+ Plain JS instead of JSON so it imports cleanly in any environment
+ (Figma included) — same shape, but comments and trailing commas
+ are allowed.
+
+ Per event:
+ org_logo hosting org's logo: a filename WITH extension in
+ public/event-logos/, e.g. "ngu-logo-white-bg.png".
+ null = fall back to DEFAULT_ORG_LOGO.
+ image event logo / flyer, same filename rule. A name with
+ no matching file just renders nothing.
+ instagram handle for the follow button, e.g. "@nextgenunity".
+ null = no Instagram button on this card.
+ color card outline / button color. null = the section's
+ defaultColor.
+ gradient card background. null = no gradient.
+ desc_a first paragraph
+ desc_b second paragraph (pricing, lodging, a note — anything)
+ status "upcoming" or "past" — grid view splits on this.
+ links [] when there's nothing to click yet.
+
+ Per section:
+ accent heading, banner, arrows, dots, fallback messages
+ defaultColor card color for events that don't set their own
+ defaultView "carousel" or "grid"
+ ═══════════════════════════════════════════════════════════════ */
+
+const eventsData = {
+ sections: [
+ {
+ id: "national",
+ title: "National Retreats",
+ blurb: "Our flagship gatherings, open to young adults across the country.",
+ accent: "#138ba0",
+ defaultColor: "#138ba0",
+ defaultView: "carousel",
+ background: "#eef9fb",
+ events: [
+ {
+ id: "spring-2025",
+ title: "Spring Retreat 2026",
+ theme: "Altering Intertia",
+ date: "March/April 2026",
+ location: "Unity Village, MO",
+ org_logo: "ngu-logo-white-bg.svg",
+ image: "fall-retreat-logo.svg",
+ instagram: "@nextgenerationunity",
+ color: "#f1c2fe",
+ gradient: "linear-gradient(150deg, rgba(240, 224, 254, 1), rgba(255, 255, 255, 0.28))",
+ desc_a: "A weekend of connection, workshops, and community for young adults across the Unity movement.",
+ desc_b: null,
+ status: "past",
+ links: []
+ },
+ {
+ id: "fall-retreat-2026",
+ title: "Fall Retreat 2026",
+ theme: "Consciousness Creates",
+ date: "November 12-15th, 2026",
+ location: "Unity Village, MO",
+ org_logo: "ngu-logo-white-bg.svg",
+ image: "fall-retreat-logo.svg",
+ instagram: "@nextgenerationunity",
+ color: "#b89421",
+ gradient: "linear-gradient(150deg, rgba(178, 150, 42, 0.45), rgba(230, 200, 120, 0.15) 65%, rgba(255, 255, 255, 0.28))",
+ desc_a: "Join us for an exciting opportunity to connect with young adults from across the country through meaningful conversations, creative workshops, and shared artistic expression. All designed to shift your focus to your highest self.",
+ desc_b: "Registration starting at $150, and $75 lodging cost.",
+ status: "upcoming",
+ links: [
+ {
+ label: "Register Now!",
+ link: "https://ngu.churchcenter.com/registrations/events/3761999"
+ },
+ {
+ label: "Scholarship Application",
+ link: "https://ngu.churchcenter.com/people/forms/1261992"
+ },
+ {
+ label: "Volunteer",
+ link: "https://ngu.churchcenter.com/people/forms/1176908"
+ }
+ ]
+ },
+ {
+ id: "spring-recharge-2027",
+ title: "Spring Recharge 2027",
+ theme: "TBD",
+ date: "March 6th, 2027",
+ location: "Online",
+ org_logo: "ngu-logo-white-bg.svg",
+ image: null,
+ instagram: "@nextgenerationunity",
+ color: "#138ba0",
+ gradient: null,
+ desc_a: "One-day online event to reconnect in the spring.",
+ desc_b: null,
+ status: "upcoming",
+ links: []
+ },
+ {
+ id: "spring-service-2027",
+ title: "Service Week 2027",
+ theme: "Leadership & Service",
+ date: "April 4-9th, 2027",
+ location: "Unity Village, MO",
+ org_logo: "ngu-logo-white-bg.svg",
+ image: null,
+ instagram: "@nextgenerationunity",
+ color: "#138ba0",
+ gradient: null,
+ desc_a: "Join us at beautiful Unity Village for a week of leadership development and service projects.",
+ desc_b: null,
+ status: "upcoming",
+ links: []
+ }
+ ]
+ },
+ {
+ id: "regional",
+ title: "Regional Retreats",
+ blurb: "Smaller gatherings hosted by regions throughout the year.",
+ accent: "#aac992",
+ defaultColor: "#aac992",
+ defaultView: "grid",
+ background: "#ffffff",
+ events: [
+ {
+ id: "northwest-2026",
+ title: "Northwest Regional 2026",
+ theme: "Theme name",
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: "@nw.ngu",
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the regional retreat goes here.",
+ desc_b: null,
+ status: "past",
+ links: []
+ },
+ {
+ id: "northwest-2027",
+ title: "Northwest Regional 2027",
+ theme: "Theme name",
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: "@nw.ngu",
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the regional retreat goes here.",
+ desc_b: null,
+ status: "upcoming",
+ links: []
+ },
+ {
+ id: "northwest-2028",
+ title: "Northwest Regional 2028",
+ theme: "Theme name",
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: "@nw.ngu",
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the regional retreat goes here.",
+ desc_b: null,
+ status: "upcoming",
+ links: []
+ }
+ ]
+ },
+ {
+ id: "partner",
+ title: "Partner Events",
+ blurb: "Events hosted by organizations we collaborate with.",
+ accent: "#7a5ea8",
+ defaultColor: "#7a5ea8",
+ defaultView: "grid",
+ background: "#eef9fb",
+ events: [
+ {
+ id: "partner-example",
+ title: "Partner Event Name",
+ theme: null,
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: null,
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the partner event goes here.",
+ desc_b: "Hosted by Partner Organization.",
+ status: "past",
+ links: [
+ {
+ label: "Learn More",
+ link: "partner-link"
+ }
+ ]
+ },
+ {
+ id: "partner-example",
+ title: "Partner Event Name",
+ theme: null,
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: null,
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the partner event goes here.",
+ desc_b: "Hosted by Partner Organization.",
+ status: "past",
+ links: [
+ {
+ label: "Learn More",
+ link: "partner-link"
+ }
+ ]
+ },
+ {
+ id: "partner-example",
+ title: "Partner Event Name",
+ theme: null,
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: null,
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the partner event goes here.",
+ desc_b: "Hosted by Partner Organization.",
+ status: "upcoming",
+ links: [
+ {
+ label: "Learn More",
+ link: "partner-link"
+ }
+ ]
+ },
+ {
+ id: "partner-example",
+ title: "Partner Event Name",
+ theme: null,
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: null,
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the partner event goes here.",
+ desc_b: "Hosted by Partner Organization.",
+ status: "upcoming",
+ links: [
+ {
+ label: "Learn More",
+ link: "partner-link"
+ }
+ ]
+ },
+ {
+ id: "partner-example",
+ title: "Partner Event Name",
+ theme: null,
+ date: "Date",
+ location: "Location",
+ org_logo: null,
+ image: null,
+ instagram: null,
+ color: null,
+ gradient: null,
+ desc_a: "Short description of the partner event goes here.",
+ desc_b: "Hosted by Partner Organization.",
+ status: "upcoming",
+ links: [
+ {
+ label: "Learn More",
+ link: "partner-link"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+};
+
+export default eventsData;
diff --git a/src/navConfig.js b/src/navConfig.js
new file mode 100644
index 0000000..f44e06e
--- /dev/null
+++ b/src/navConfig.js
@@ -0,0 +1,52 @@
+// Single source of truth for navigation.
+// Add a page here and in App.jsx, and both tiers of the nav update.
+
+export const PAGE_LINKS = [
+ { label: "Home", path: "/" },
+ { label: "Retreats", path: "/retreats" },
+ { label: "Community", path: "/community" },
+ { label: "Leadership", path: "/leadership" },
+ { label: "Resources", path: "/resources" },
+];
+
+// Sections belong to a page, keyed by that page's path.
+// A page with no sections gets no subnav row.
+export const PAGE_SECTIONS = {
+ "/": [
+ { label: "#About", hash: "#about" },
+ { label: "#Events", hash: "#events" },
+ { label: "#Connect", hash: "#connect" },
+ ],
+ "/retreats": [
+ { label: "National", hash: "#national" },
+ { label: "Regional", hash: "#regional" },
+ { label: "Partner Events", hash: "#partner"},
+ ],
+ "/community": [
+ { label: "Local Chapters", hash: "#local" },
+ { label: "Virtual Community", hash: "#virtual" },
+ { label: "Partner Organizations", hash: "#partners" },
+ ],
+ "/leadership": [
+ { label: "Board & Staff", hash: "#board-staff" },
+ { label: "Retreat Team", hash: "#retreat-team" },
+ { label: "Committees & Volunteers", hash: "#committees" },
+ { label: "Contact Us", hash: "#contact" },
+ ],
+ "/resources": [
+ { label: "Unity Teachings", hash: "#unity" },
+ { label: "Branding & Marketing", hash: "#branding" },
+ { label: "Partner Resources", hash: "#partner" },
+ ],
+};
+
+// Right-side actions. `variant` picks the styling, not the destination.
+export const NAV_ACTIONS = [
+ { label: "Contact Us", to: "/leadership#contact", variant: "ghost" },
+ {
+ label: "Give",
+ to: "/give",
+ variant: "fancy",
+ external: true,
+ },
+];
diff --git a/src/pages/Chapters.tsx b/src/pages/Chapters.tsx
new file mode 100644
index 0000000..3016e46
--- /dev/null
+++ b/src/pages/Chapters.tsx
@@ -0,0 +1,717 @@
+import { useEffect, useRef, useState } from "react";
+import {
+ GROUPS,
+ CHAPTERS,
+ groupOf,
+ groupSubtext,
+ DOMESTIC,
+ INTERNATIONAL,
+ VIRTUAL,
+ SPLITS,
+ STATE_GRID,
+ MAP_BANDS,
+ STATE_NAMES,
+ GROUP_BY_ID,
+ GROUP_BY_STATE,
+ groupsForState,
+ CHAPTER_COUNT_BY_STATE,
+ chaptersIn,
+} from "./chapters.js";
+
+/* ═══════════════════════════════════════════════════════════════
+ LOCAL CHAPTERS
+ A tile-grid map on the left, the chapter list on the right.
+ Selecting a region on either side filters both.
+
+ Why a tile grid rather than a geographic map: every state reads
+ at the same size (so Rhode Island is as clickable as Texas), it
+ stays legible on a phone, it needs no map library or GeoJSON,
+ and a state split between two regions is just a tile painted in
+ two colors. If you later want true geography, the swap point is
+
+
+ );
+}
+
+function GroupBlock({
+ group,
+ selected,
+ setSelected,
+ setHovered,
+ indent,
+ groupRefs,
+ chapterRefs,
+}) {
+ const chapters = chaptersIn(group.id);
+ const on = selected === group.id;
+
+ return (
+ + US Regions +
+
+ {us.map(g => (
+
+
+
+
+ + International +
+
+ {intl.map(g => (
+
+ groupRefs && (groupRefs.current[group.id] = el)}
+ className="transition-opacity duration-200"
+ style={{ opacity: selected && !on ? 0.35 : 1, marginLeft: indent ? "0.75rem" : 0 }}
+ >
+
+
+ {groupSubtext(group) && (
+
+ );
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+ GRID VIEW
+ One grid per region. Clicking a card's arrow opens a detail
+ panel directly above that region's grid, framed in the region
+ color. Selecting another card swaps the panel's contents.
+ ═══════════════════════════════════════════════════════════════ */
+
+const LOGO_BASE = "/chapter-logos/";
+
+/* Logo, or the chapter's initials when there's no file. */
+function ChapterLogo({ chapter, color, size = "h-14 w-14" }) {
+ const [failed, setFailed] = useState(false);
+ const initials = chapter.name
+ .replace(/^NGU\s+/i, "")
+ .split(/\s+/)
+ .slice(0, 2)
+ .map(w => w[0])
+ .join("")
+ .toUpperCase();
+
+ if (chapter.logo && !failed) {
+ return (
+ + {groupSubtext(group)} +
+ )} + + {chapters.length === 0 ? ( ++ No chapters yet — interested in starting one? +
+ ) : ( +-
+ {chapters.map(c => (
+
- chapterRefs && (chapterRefs.current[c.id] = el)}
+ className="pl-3"
+ style={{ borderLeft: `2px solid ${group.color}` }}
+ >
+
{c.name}
++ {c.city} + {c.meets ? ` · ${c.meets}` : ""} +
+ {(c.link || c.contact) && ( ++ {c.link && ( + + Details + + )} + {c.contact && ( + + Contact + + )} +
+ )} +
+ ))}
+
+ {initials}
+
+ );
+}
+
+function ChapterCard({ chapter, color, open, onOpen }) {
+ return (
+
+
+ );
+}
+
+function ChapterDetail({ chapter, group, onClose }) {
+ const rows = [
+ ["Region", group.name],
+ ["Where", chapter.where],
+ ["Meets", chapter.meets],
+ ["Led by", chapter.leads],
+ ["Since", chapter.started],
+ ].filter(([, v]) => v);
+
+ return (
+
+
+
+
+ {chapter.name}
+{chapter.city}
+ {chapter.meets && ( +{chapter.meets}
+ )} +
+
+ );
+}
+
+function ChapterGrid({ openId, setOpenId }) {
+ // Only regions that actually have chapters get a grid.
+ const populated = GROUPS.map(g => ({ group: g, list: chaptersIn(g.id) })).filter(
+ ({ list }) => list.length > 0
+ );
+ const empty = GROUPS.filter(g => chaptersIn(g.id).length === 0);
+ const openChapter = CHAPTERS.find(c => c.id === openId) || null;
+
+ return (
+
+
+
+ {chapter.about && (
+
+
+
+
+ {chapter.name}
+{chapter.city}
+{chapter.about}
+ )} + + {rows.length > 0 && ( +-
+ {rows.map(([label, value]) => (
+
- {label} +
- {value} +
+
+ ))}
+
+ {chapter.link && (
+
+ Visit page
+
+ )}
+ {chapter.contact && (
+
+ Get in touch
+
+ )}
+
+ )}
+
+ {populated.map(({ group, list }) => (
+
+ setOpenId(null)}
+ />
+ )}
+
+
+ ))}
+
+ {empty.length > 0 && (
+
+ );
+}
+
+/* The control for the section heading's action bar. */
+export function ChaptersViewToggle({ view, setView, accent }) {
+ const btn = active => ({
+ background: active ? accent : "transparent",
+ color: active ? "#ffffff" : accent,
+ });
+
+ return (
+
+
+
+ {groupSubtext(group) && (
+ + {group.name} +
+ {list.length} +{groupSubtext(group)}
+ )} + + {/* Detail panel sits above this region's grid, and only + when the open chapter belongs to this region. */} + {openChapter && groupOf(openChapter)?.id === group.id && ( +
+ {list.map(c => (
+ setOpenId(openId === c.id ? null : c.id)}
+ />
+ ))}
+
+ + No chapters yet in {empty.map(g => g.name).join(", ")} — interested in + starting one? +
+ )} +
+ {[
+ ["map", "Map"],
+ ["grid", "Grid"],
+ ].map(([id, label]) => (
+
+ ))}
+
+ );
+}
+
+export default function LocalChapters({ view = "map" }) {
+ const [selected, setSelected] = useState(null);
+ const [hovered, setHovered] = useState(null);
+ const [openId, setOpenId] = useState(null); // no card open on arrival
+
+ // The list scrolls itself to whatever the map or legend points at.
+ const listRef = useRef(null);
+ const groupRefs = useRef({});
+ const chapterRefs = useRef({});
+
+ const scrollListTo = el => {
+ const box = listRef.current;
+ if (!box || !el) return;
+ // Only when the list is its own scroll area (lg and up). Below
+ // that it's stacked under the map and scrolling it would fight
+ // the page.
+ if (box.scrollHeight <= box.clientHeight) return;
+ box.scrollTo({ top: el.offsetTop - 8, behavior: "smooth" });
+ };
+
+ // Hovering or selecting a region brings that block into view.
+ useEffect(() => {
+ const id = hovered || selected;
+ if (id) scrollListTo(groupRefs.current[id]);
+ }, [hovered, selected]);
+
+ // Clicking a state jumps to its first chapter when it has one,
+ // otherwise to the region it belongs to.
+ const pickState = code => {
+ const chapter = CHAPTERS.find(c => c.state === code);
+ if (chapter && chapterRefs.current[chapter.id]) {
+ return scrollListTo(chapterRefs.current[chapter.id]);
+ }
+ const group = GROUP_BY_STATE[code];
+ if (group) scrollListTo(groupRefs.current[group.id]);
+ };
+
+ const shared = { selected, setSelected, hovered, setHovered };
+ const listProps = { ...shared, groupRefs, chapterRefs };
+
+ if (view === "grid") {
+ return
+
+ );
+}
+
diff --git a/src/pages/Community.tsx b/src/pages/Community.tsx
new file mode 100644
index 0000000..65133e1
--- /dev/null
+++ b/src/pages/Community.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react";
+import PageShell from "../components/PageShell.jsx";
+import LocalChapters, { ChaptersViewToggle } from "./Chapters.jsx";
+
+/* Section ids match the nav hashes: #local, #virtual, #partners.
+ `content` is whatever you want inside — cards, a list, plain
+ copy. The empty divs below are placeholders to build into. */
+const LOCAL_ACCENT = "#138ba0";
+
+export default function CommunityPage() {
+ // Map or grid for the chapters section. Lives here so the toggle in
+ // the heading's action bar and the content below it stay in sync.
+ const [chaptersView, setChaptersView] = useState("map");
+
+ const sections = [
+ {
+ id: "local",
+ title: "Local Chapters",
+ blurb: "Groups meeting in person around the country. Find one near you.",
+ accent: LOCAL_ACCENT,
+ background: "#eef9fb",
+ actions: (
+
+ {/* Map */}
+
+
+
+
+ {/* List — h-0 + min-h-full makes this column take its height
+ from the map column rather than the other way round, so a
+ long list scrolls instead of stretching the section. */}
+ + A filled tile means a chapter meets there; a two-tone tile is a + state shared by two regions. Select a region to filter the list. +
+
+
+ US Regions
+ {DOMESTIC.map(g => ( ++ International +
+ {INTERNATIONAL.map(g => ( +
+ {VIRTUAL.map(g => (
+
+
+ {/* Virtual community content */}
+
+ ),
+ },
+ {
+ id: "partners",
+ title: "Partner Organizations",
+ blurb: "Organizations we collaborate with across the Unity movement.",
+ accent: "#7a5ea8",
+ background: "#eef9fb",
+ content: (
+
+ {/* Partner organizations content */}
+
+ ),
+ },
+ ];
+
+ return (
+
+
+ );
+ }
+
+ return (
+ + Thanks — we've got it +
++ {email + ? `We'll follow up at ${email} if we have questions.` + : "You sent this anonymously, so we won't be able to reply — but we read everything that comes in."} +
+ +