@okjt/site 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,136 @@
-# Temporary Holding Version
+# @okjt/site
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The public pages of an OKJTech project: layout, navigation, footer, SEO, and
+the sections pages are built from (photo hero, feature explorer, showcase,
+pricing, FAQ, legal documents). Colours and fonts come from `@okjt/ui`'s
+theme; words, links, pictures and screens come from the project's `site`
+settings.
+
+## Install
+
+```bash
+npm i @okjt/site
+npm i -D @okjt/ui
+```
+
+Peer dependencies: `react`, `react-router-dom`, `framer-motion`, `lucide-react`.
+
+Let Tailwind see the kit's class names, after the theme (see `@okjt/ui`):
+
+```css
+@import "tailwindcss";
+@import "./okjt-theme.css";
+@source "../node_modules/@okjt/site/dist";
+```
+
+## Set it up
+
+```jsx
+import { SiteProvider } from '@okjt/site';
+import { site } from './site.config';
+
+<SiteProvider site={site}>
+  <App />
+</SiteProvider>
+```
+
+```jsx
+// src/site.config.jsx
+import { ShieldCheck, FileText } from 'lucide-react';
+import { useAuth } from './context/AuthContext';
+
+export const site = {
+  brand: { name: 'Najenga', logo: { light: '/brand/logo-light.png', dark: '/brand/logo-dark.png' } },
+
+  // `mega: { Menu, MobileList, id, buttonLabel }` on one item opens a large menu under the bar.
+  nav: [
+    { to: '/', label: 'Home' },
+    { to: '/features', label: 'Features' },
+    { to: '/#pricing', label: 'Pricing' },
+  ],
+
+  useAccount: () => ({ signedIn: useAuth().isAuthenticated }),
+  accountLinks: {
+    signIn: { to: '/sign-in', label: 'Sign in' },
+    signUp: { to: '/sign-up', label: 'Get started' },
+    home: { to: '/projects', label: 'Your projects' },
+  },
+
+  // Photos are keys; these two hooks turn a key into a URL and alt text, and a
+  // named place on the pages ("footer", "group-money") into its photo(s).
+  usePhotos: () => ({ url: (key, width) => `/photos/${key}${width <= 900 ? '-sm' : ''}.webp`, alt: (key) => ALT[key] }),
+  usePlaces: () => (place) => PLACES[place],
+
+  // Product screens and clips: { src, alt, url, video?, phone? }.
+  media: { dashboard: { src: '/screens/dashboard.webp', alt: 'The dashboard', url: 'najenga.co.ke/dashboard' } },
+
+  footer: {
+    about: 'Najenga keeps every shilling and every site photo of your build in one place.',
+    columns: [{ title: 'Product', links: [{ to: '/features', label: 'Features' }, { to: '/sign-in', label: 'Sign in', signedIn: false }] }],
+    promises: [{ icon: ShieldCheck, text: 'Your records stay yours' }],
+    cta: {
+      place: 'footer', eyebrow: 'Start today', title: 'Build with your eyes open.', text: 'Set up a project in a minute.',
+      primary: { to: '/sign-up', label: 'Start a project' }, secondary: { to: '/features', label: 'Explore features' },
+    },
+    watermark: 'najenga.',
+    copyright: 'Najenga',
+    madeBy: { label: 'Built to last by', name: 'OKJ Technologies', href: 'https://okjtech.co.ke', logo: '/okjt-logo.png' },
+  },
+
+  legal: {
+    documents: [{ to: '/terms', label: 'Terms of service', icon: FileText }],
+    contact: 'Contact OKJ Technologies through okjtech.co.ke.',
+    lastUpdated: '2026-10-29',
+    seeAlso: [{ to: '/terms', label: 'Terms of service' }],
+  },
+
+  seo: {
+    origin: 'https://najenga.co.ke',
+    siteName: 'Najenga',
+    locale: 'en_KE',
+    defaultTitle: 'Najenga — building, accounted for',
+    defaultDescription: 'Track the costs, receipts and progress of your construction projects.',
+    pages: { '/features': { title: 'Features | Najenga', description: '…' } },
+    resolve: (path) => undefined, // titles for pages made from data, e.g. /projects/:slug
+  },
+};
+```
+
+Any path not in `seo.pages` (and not resolved) gets the defaults and `noindex`.
+
+## Building blocks
+
+| Export | What it is |
+|---|---|
+| `SiteLayout` | Nav, page, footer; `overlay` puts the nav over a full-bleed hero, `cta={false}` drops the footer's call to action |
+| `SiteNav`, `SiteFooter`, `Seo` | The parts `SiteLayout` uses |
+| `Container`, `Logo`, `PillLink`, `Eyebrow`, `Chip`, `SectionHeading` | Page width, the brand mark, call-to-action links, labels, headings |
+| `PhotoHero`, `HeroOrnament` | A full-bleed photo hero with a large light headline |
+| `ImageCard` | A large rounded card with a photo behind its words; a link when given `to` |
+| `Photo` | A photo filling its parent; a list of keys cross-fades. While loading or if it fails, a warm gradient shows (restyle it with `.okjt-photo`) |
+| `MediaFrame`, `MediaFill` | A product screen or clip in a browser or phone frame, or bare |
+| `FeatureExplorer` | Feature groups as tabs beside a large photo card with a summary, numbers and a screen |
+| `FeatureGroup` | One feature group in depth: heading, numbers, photo card and screen, every tool |
+| `JourneyGlance`, `JourneyChapter` | A journey's numbers at a glance, and one chapter of it |
+| `ShowcaseCarousel` | A stack of screens with arrows and a list |
+| `SectionNav`, `SECTION_OFFSET`, `useScrollSpy` | The sticky bar of the page's sections, with "you are here" |
+| `FaqSection` | Questions and answers |
+| `PricingSection` | Plan cards, already worded by the project |
+| `LegalPage` | A legal document with its contents beside it |
+| `RollingWord`, `useRolling` | Words that roll through a list in a headline |
+
+Dark public pages: swap the theme's light and dark tokens and set `surface`,
+`onInk` and `panel` (see `packages/UPGRADING.md`, site 0.2.0).
+
+Class hooks for a project's CSS: `.okjt-site` (the page behind everything,
+e.g. a gradient or texture), `.okjt-card-shade` (the shade over photos on
+ImageCard and FeatureExplorer, e.g. darker for contrast), `.okjt-photo`
+(a photo's loading or failed state), `.okjt-card` (cards on the page: the
+explorer's summary, questions, a legal document, e.g. to give them their own
+colours), `.okjt-section-nav` (the sticky bar of sections), `.okjt-site-nav`
+with `.okjt-site-nav-over` / `.okjt-site-nav-solid` (the top bar over a hero
+or on its own background), `.okjt-pill` and `.okjt-pill-<variant>`
+(call-to-action links).
+
+Headings inside the kit's components carry `!` on their font and colour, so a
+host app's own global `h1`–`h3` styles don't change them.

package/dist/FaqSection.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Container, SectionHeading } from "./ui.js";
+import { SECTION_OFFSET } from "./SectionNav.js";
+function FaqSection({ id = "faq", items, eyebrow = "FAQ", title = "Questions, answered", text }) {
+  const [openIndex, setOpenIndex] = useState(0);
+  return /* @__PURE__ */ jsx("section", { id, className: `${SECTION_OFFSET} py-24`, children: /* @__PURE__ */ jsxs(Container, { className: "grid gap-12 lg:grid-cols-12", children: [
+    /* @__PURE__ */ jsx("div", { className: "lg:col-span-4", children: /* @__PURE__ */ jsx(SectionHeading, { eyebrow, title, text, align: "left", className: "lg:sticky lg:top-28" }) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3 lg:col-span-8", children: items.map((item, i) => {
+      const open = openIndex === i;
+      return /* @__PURE__ */ jsxs("div", { className: `okjt-card rounded-3xl border transition-colors ${open ? "border-transparent bg-surface shadow-[0_20px_50px_-35px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_50%,transparent)]" : "border-line bg-surface/50"}`, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpenIndex(open ? -1 : i),
+            "aria-expanded": open,
+            className: "flex w-full items-center justify-between gap-4 px-6 py-5 text-left font-medium text-ink sm:px-8",
+            children: [
+              item.q,
+              /* @__PURE__ */ jsx("span", { className: `grid h-8 w-8 shrink-0 place-items-center rounded-full transition-all ${open ? "rotate-45 bg-fill text-on-ink" : "bg-tint text-accent"}`, children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4", "aria-hidden": "true" }) })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx("div", { className: "px-6 pb-6 text-sm leading-relaxed text-soft sm:px-8", children: item.a })
+      ] }, item.q);
+    }) })
+  ] }) });
+}
+export {
+  FaqSection as default
+};

package/dist/FeatureExplorer.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import Photo from "./Photo.js";
+import MediaFrame from "./MediaFrame.js";
+import { usePlaces, useSite } from "./SiteProvider.js";
+function FeatureExplorer({
+  groups,
+  href = (group) => `/features#${group.id}`,
+  linkLabel = "See every detail",
+  countLabel = "tools",
+  label = "Feature areas"
+}) {
+  const place = usePlaces();
+  const { media: MEDIA = {} } = useSite();
+  const [activeId, setActiveId] = useState(groups[0].id);
+  const active = groups.find((g) => g.id === activeId) || groups[0];
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-8 lg:grid-cols-12 lg:gap-12", children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": "vertical", className: "-mx-4 flex gap-2 overflow-x-auto px-4 pb-2 lg:mx-0 lg:block lg:space-y-1 lg:overflow-visible lg:border-l lg:border-line-strong lg:px-0 lg:pb-0 lg:col-span-3", children: groups.map((group) => {
+      const selected = group.id === active.id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          onClick: () => setActiveId(group.id),
+          className: `relative shrink-0 rounded-full px-4 py-2 text-left transition-colors lg:block lg:w-full lg:rounded-none lg:px-6 lg:py-3 ${selected ? "bg-fill text-on-ink lg:bg-transparent lg:text-ink" : "bg-surface/60 text-muted hover:text-ink lg:bg-transparent"}`,
+          children: [
+            selected && /* @__PURE__ */ jsx(motion.span, { layoutId: "explorer-bar", className: "absolute -left-px top-0 hidden h-full w-0.5 bg-ink lg:block" }),
+            /* @__PURE__ */ jsx("span", { className: "block whitespace-nowrap text-sm font-semibold lg:text-base lg:font-medium", children: group.eyebrow }),
+            group.features?.length > 0 && /* @__PURE__ */ jsxs("span", { className: "hidden text-xs text-faint lg:block", children: [
+              group.features.length,
+              " ",
+              typeof countLabel === "function" ? countLabel(group.features.length) : countLabel
+            ] })
+          ]
+        },
+        group.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "lg:col-span-9", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        role: "tabpanel",
+        initial: { opacity: 0, y: 12 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -12 },
+        transition: { duration: 0.35 },
+        className: "group relative isolate flex min-h-[34rem] flex-col justify-between overflow-hidden rounded-[2rem] p-4 sm:p-6 lg:min-h-[38rem]",
+        children: [
+          /* @__PURE__ */ jsx(Photo, { image: place(`group-${active.id}`), className: "-z-10" }),
+          /* @__PURE__ */ jsx("div", { className: "okjt-card-shade absolute inset-0 -z-10 bg-gradient-to-t from-ink-deep/85 via-ink-deep/10 to-ink-deep/10" }),
+          /* @__PURE__ */ jsxs("div", { className: "okjt-card max-w-sm rounded-3xl border border-surface/50 bg-surface/75 p-6 shadow-xl backdrop-blur-xl", children: [
+            /* @__PURE__ */ jsx("h3", { className: "!font-display text-2xl !font-normal tracking-tight !text-ink", children: active.title }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 text-sm leading-relaxed text-body", children: active.summary }),
+            /* @__PURE__ */ jsxs(Link, { to: href(active), className: "mt-5 inline-flex items-center gap-1 text-[11px] font-bold uppercase tracking-[0.15em] text-ink hover:text-accent", children: [
+              linkLabel,
+              " ",
+              /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `pointer-events-none absolute hidden rotate-[-2deg] lg:block ${MEDIA[active.media]?.phone ? "bottom-8 right-10 w-52" : "bottom-24 right-6 w-[46%]"}`, children: /* @__PURE__ */ jsx(MediaFrame, { media: active.media }) }),
+          /* @__PURE__ */ jsx("dl", { className: "mt-10 grid grid-cols-3 gap-4 px-2 text-white sm:max-w-xl", children: active.stats.map(([value, label2]) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-xs text-white/70", children: label2 }),
+            /* @__PURE__ */ jsx("dd", { className: "mt-1 font-display text-xl font-light sm:text-3xl", children: value })
+          ] }, label2)) })
+        ]
+      },
+      active.id
+    ) }) })
+  ] });
+}
+export {
+  FeatureExplorer as default
+};

package/dist/FeatureGroup.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import ImageCard from "./ImageCard.js";
+import MediaFrame from "./MediaFrame.js";
+import { Container, Eyebrow } from "./ui.js";
+import { SECTION_OFFSET } from "./SectionNav.js";
+import { usePlaces, useSite } from "./SiteProvider.js";
+function FeatureGroup({ group, index }) {
+  const place = usePlaces();
+  const { media: MEDIA = {} } = useSite();
+  const media = MEDIA[group.clip] || MEDIA[group.media];
+  const flip = index % 2 === 1;
+  return /* @__PURE__ */ jsx("section", { id: group.id, className: `${SECTION_OFFSET} py-20 lg:py-28`, children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid items-end gap-8 lg:grid-cols-12", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-7", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-display text-sm font-semibold text-accent-soft", children: String(index + 1).padStart(2, "0") }),
+          /* @__PURE__ */ jsx(Eyebrow, { children: group.eyebrow })
+        ] }),
+        /* @__PURE__ */ jsx("h2", { className: "mt-4 !font-display text-4xl !font-light leading-[1.05] tracking-tight !text-ink sm:text-5xl", children: group.title }),
+        /* @__PURE__ */ jsx("div", { className: "mt-5 max-w-2xl text-lg leading-relaxed text-soft", children: group.summary })
+      ] }),
+      /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-3 gap-3 lg:col-span-5", children: group.stats.map(([value, label]) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-line bg-surface/60 p-4", children: [
+        /* @__PURE__ */ jsx("dd", { className: "font-display text-xl font-normal tracking-tight text-ink sm:text-2xl", children: value }),
+        /* @__PURE__ */ jsx("dt", { className: "mt-1 text-xs text-muted", children: label })
+      ] }, label)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `mt-12 grid gap-5 lg:grid-cols-12 ${flip ? "lg:[&>*:first-child]:order-2" : ""}`, children: [
+      /* @__PURE__ */ jsx(ImageCard, { image: place(`group-${group.id}-card`), tags: [group.eyebrow], title: group.features[0].title, text: group.features[0].text, className: "min-h-[24rem] lg:col-span-5" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-[1.75rem] bg-line p-4 sm:p-8 lg:col-span-7", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute -right-24 -top-24 h-64 w-64 rounded-full bg-surface/50 blur-3xl", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(MediaFrame, { media, className: "relative" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-5 grid gap-5 sm:grid-cols-2 lg:grid-cols-3", children: group.features.map((feature) => /* @__PURE__ */ jsxs("article", { className: "flex flex-col rounded-[1.75rem] border border-line bg-surface p-6 sm:p-7", children: [
+      /* @__PURE__ */ jsx("h3", { className: "!font-display text-xl !font-medium !text-ink", children: feature.title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 text-sm leading-relaxed text-soft", children: feature.text }),
+      feature.details.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-5 space-y-2 border-t border-tint pt-5 text-sm text-body", children: feature.details.map((detail) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2.5", children: [
+        /* @__PURE__ */ jsx(Check, { className: "mt-0.5 h-4 w-4 shrink-0 text-accent", "aria-hidden": "true" }),
+        detail
+      ] }, detail)) })
+    ] }, feature.title)) })
+  ] }) });
+}
+export {
+  FeatureGroup as default
+};

package/dist/ImageCard.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import { ArrowUpRight } from "lucide-react";
+import Photo from "./Photo.js";
+import { Chip } from "./ui.js";
+function ImageCard({
+  image,
+  title,
+  text,
+  tags = [],
+  to,
+  position,
+  className = "min-h-[22rem]",
+  titleClass = "text-2xl sm:text-3xl",
+  children
+}) {
+  const Wrapper = to ? Link : "div";
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      to,
+      className: `group relative isolate flex flex-col justify-end overflow-hidden rounded-[1.75rem] p-6 text-white shadow-[0_30px_60px_-35px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_70%,transparent)] sm:p-8 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(Photo, { image, position, className: "-z-10" }),
+        /* @__PURE__ */ jsx("div", { className: "okjt-card-shade absolute inset-0 -z-10 bg-gradient-to-t from-ink-deep/85 via-ink-deep/25 to-transparent" }),
+        to && /* @__PURE__ */ jsx("span", { className: "absolute right-5 top-5 grid h-10 w-10 place-items-center rounded-full bg-white/15 backdrop-blur transition-colors group-hover:bg-surface group-hover:text-ink", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-4 w-4" }) }),
+        tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Chip, { children: tag }, tag)) }),
+        title && /* @__PURE__ */ jsx("h3", { className: `!font-display !font-normal leading-tight tracking-tight !text-white ${titleClass}`, children: title }),
+        text && /* @__PURE__ */ jsx("div", { className: "mt-2 max-w-md text-sm leading-relaxed text-white/80", children: text }),
+        children
+      ]
+    }
+  );
+}
+export {
+  ImageCard as default
+};

package/dist/Journey.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2, Lightbulb } from "lucide-react";
+import MediaFrame from "./MediaFrame.js";
+import { Eyebrow } from "./ui.js";
+import { SECTION_OFFSET } from "./SectionNav.js";
+import { useMedia } from "./SiteProvider.js";
+function JourneyGlance({ journey }) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-[2rem] bg-surface p-6 shadow-[0_40px_80px_-40px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_50%,transparent)] sm:p-10", children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-6 lg:grid-cols-4", children: journey.glance.map(([value, label]) => /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-tint p-5", children: [
+    /* @__PURE__ */ jsx("dd", { className: "font-display text-3xl font-light tracking-tight text-ink sm:text-4xl", children: value }),
+    /* @__PURE__ */ jsx("dt", { className: "mt-1 text-sm text-soft", children: label })
+  ] }, label)) }) });
+}
+function JourneyChapter({ chapter, index, detailsLabel = "The nitty-gritty", tipLabel = "Good to know" }) {
+  const phone = useMedia(chapter.media)?.phone;
+  return /* @__PURE__ */ jsxs("article", { id: chapter.id, className: `${SECTION_OFFSET} grid gap-8 border-t border-line py-14 first:border-t-0 first:pt-0 lg:grid-cols-12 lg:gap-12 lg:py-16`, children: [
+    /* @__PURE__ */ jsx("div", { className: `lg:sticky lg:top-40 lg:self-start ${phone ? "lg:col-span-5" : "lg:col-span-7"}`, children: /* @__PURE__ */ jsx(MediaFrame, { media: chapter.media, className: phone ? "max-w-[16rem]" : "" }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${phone ? "lg:col-span-7" : "lg:col-span-5"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-display text-4xl font-extralight text-accent-soft", children: String(index + 1).padStart(2, "0") }),
+        /* @__PURE__ */ jsx("span", { className: "rounded-full bg-fill px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.15em] text-on-ink", children: chapter.when })
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "mt-3 !font-display text-3xl !font-light tracking-tight !text-ink sm:text-4xl", children: chapter.title }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 leading-relaxed text-soft", children: chapter.intro }),
+      /* @__PURE__ */ jsx("ol", { className: "mt-6 divide-y divide-tint rounded-3xl border border-line bg-surface", children: chapter.steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex gap-4 p-5", children: [
+        /* @__PURE__ */ jsx("span", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-full bg-tint text-xs font-semibold text-accent", children: i + 1 }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { className: "!font-sans text-base !font-semibold !text-ink", children: step.title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm leading-relaxed text-soft", children: step.text })
+        ] })
+      ] }, step.title)) }),
+      chapter.details.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded-3xl bg-tint p-5", children: [
+        /* @__PURE__ */ jsx(Eyebrow, { children: detailsLabel }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-3 space-y-2 text-sm text-body", children: chapter.details.map((detail) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(CheckCircle2, { className: "mt-0.5 h-4 w-4 shrink-0 text-accent", "aria-hidden": "true" }),
+          detail
+        ] }, detail)) })
+      ] }),
+      chapter.tip && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-4 rounded-3xl bg-fill p-5 text-on-ink", children: [
+        /* @__PURE__ */ jsx(Lightbulb, { className: "h-5 w-5 shrink-0 text-accent-soft", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-[0.2em] text-accent-soft", children: tipLabel }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-relaxed text-on-ink/85", children: chapter.tip })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  JourneyChapter,
+  JourneyGlance
+};

package/dist/LegalPage.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { Link, NavLink } from "react-router-dom";
+import { Mail } from "lucide-react";
+import SiteLayout from "./SiteLayout.js";
+import { Container, Eyebrow } from "./ui.js";
+import useScrollSpy from "./useScrollSpy.js";
+import SectionNav, { SECTION_OFFSET } from "./SectionNav.js";
+import { useSite } from "./SiteProvider.js";
+function Sidebar({ sections, active }) {
+  const { legal } = useSite();
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Legal", className: "space-y-8 lg:sticky lg:top-28", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 lg:flex-col", children: legal.documents.map((doc) => {
+      const Icon = doc.icon;
+      return /* @__PURE__ */ jsxs(
+        NavLink,
+        {
+          to: doc.to,
+          className: ({ isActive }) => `flex min-w-[10rem] flex-1 items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium transition-colors ${isActive ? "bg-fill text-on-ink" : "bg-surface text-body hover:bg-tint"}`,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+            doc.label
+          ]
+        },
+        doc.to
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden lg:block", children: [
+      /* @__PURE__ */ jsx(Eyebrow, { children: "Contents" }),
+      /* @__PURE__ */ jsx("ol", { className: "mt-4 space-y-0.5 border-l border-line-strong", children: sections.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `#${s.id}`,
+          "aria-current": active === s.id ? "location" : void 0,
+          className: `-ml-px flex gap-3 border-l-2 py-1.5 pl-4 text-sm transition-colors ${active === s.id ? "border-ink font-medium text-ink" : "border-transparent text-muted hover:text-body"}`,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "w-5 shrink-0 tabular-nums text-accent-soft", children: [
+              i + 1,
+              "."
+            ] }),
+            s.title
+          ]
+        }
+      ) }, s.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "hidden rounded-2xl bg-tint p-5 text-sm text-body lg:block", children: [
+      /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4 text-accent", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 font-medium text-ink", children: "Questions?" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 text-soft", children: legal.contact })
+    ] })
+  ] });
+}
+function LegalPage({ title, intro, sections }) {
+  const { legal } = useSite();
+  const updated = (/* @__PURE__ */ new Date(`${legal.lastUpdated}T00:00:00`)).toLocaleDateString(void 0, { dateStyle: "long" });
+  const active = useScrollSpy(sections.map((s) => s.id));
+  return /* @__PURE__ */ jsxs(SiteLayout, { cta: false, children: [
+    /* @__PURE__ */ jsx(Container, { className: "pt-10 lg:pt-16", children: /* @__PURE__ */ jsxs("header", { className: "max-w-3xl", children: [
+      /* @__PURE__ */ jsx(Eyebrow, { children: "Legal" }),
+      /* @__PURE__ */ jsx("h1", { className: "mt-3 !font-display text-4xl !font-light tracking-tight !text-ink sm:text-6xl", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm text-muted", children: [
+        "Last updated ",
+        updated
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(SectionNav, { label: "Contents", numbered: true, className: "lg:hidden", sections: sections.map((s) => ({ id: s.id, label: s.title })) }),
+    /* @__PURE__ */ jsx(Container, { className: "pb-16 pt-8 lg:pt-0", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 grid gap-10 lg:mt-12 lg:grid-cols-12", children: [
+      /* @__PURE__ */ jsx("aside", { className: "lg:col-span-4 xl:col-span-3", children: /* @__PURE__ */ jsx(Sidebar, { sections, active }) }),
+      /* @__PURE__ */ jsxs("article", { className: "okjt-card rounded-[2rem] bg-surface p-6 sm:p-10 lg:col-span-8 xl:col-span-9 xl:p-14", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-lg leading-relaxed text-body", children: intro }),
+        sections.map((s, i) => /* @__PURE__ */ jsxs("section", { id: s.id, className: `${SECTION_OFFSET} lg:scroll-mt-28 border-t border-tint pt-10 mt-10 first-of-type:mt-10`, children: [
+          /* @__PURE__ */ jsxs("h2", { className: "!font-display text-2xl !font-normal tracking-tight !text-ink", children: [
+            /* @__PURE__ */ jsxs("span", { className: "mr-2 text-accent-soft", children: [
+              i + 1,
+              "."
+            ] }),
+            s.title
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 max-w-3xl space-y-3 leading-relaxed text-body [&_a]:text-accent-strong [&_li]:ml-5 [&_li]:list-disc [&_ul]:space-y-1.5", children: s.body })
+        ] }, s.id)),
+        /* @__PURE__ */ jsxs("div", { className: "mt-12 border-t border-tint pt-6 text-sm text-muted", children: [
+          "See also: ",
+          legal.seeAlso.map((link, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            i > 0 && " \xB7 ",
+            /* @__PURE__ */ jsx(Link, { to: link.to, className: "hover:text-body", children: link.label })
+          ] }, link.to))
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  LegalPage as default
+};

package/dist/MediaFrame.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useMedia } from "./SiteProvider.js";
+function useInViewPlayback() {
+  const ref = useRef(null);
+  useEffect(() => {
+    const video = ref.current;
+    if (!video || typeof IntersectionObserver === "undefined") return void 0;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) video.play?.()?.catch?.(() => {
+      });
+      else video.pause?.();
+    }, { threshold: 0.25 });
+    observer.observe(video);
+    return () => observer.disconnect();
+  }, []);
+  return ref;
+}
+function MediaFill({ media, className = "", position = "top" }) {
+  const item = useMedia(media);
+  const videoRef = useInViewPlayback();
+  const [failed, setFailed] = useState(false);
+  if (!item) return null;
+  const fit = `h-full w-full object-cover ${position === "top" ? "object-top" : "object-center"} ${className}`;
+  if (failed) return /* @__PURE__ */ jsx("div", { className: `grid place-items-center bg-tint p-6 text-center text-sm text-muted ${fit}`, children: item.alt });
+  if (item.video) {
+    return /* @__PURE__ */ jsx("video", { ref: videoRef, className: fit, poster: item.src, muted: true, loop: true, playsInline: true, preload: "none", "aria-label": item.alt, onError: () => setFailed(true), children: /* @__PURE__ */ jsx("source", { src: item.video, type: "video/mp4" }) });
+  }
+  return /* @__PURE__ */ jsx("img", { src: item.src, alt: item.alt, loading: "lazy", decoding: "async", className: fit, onError: () => setFailed(true) });
+}
+function MediaFrame({ media, className = "", variant }) {
+  const item = useMedia(media);
+  if (!item) return null;
+  const kind = variant || (item.phone ? "phone" : "browser");
+  if (kind === "phone") {
+    return /* @__PURE__ */ jsxs("div", { className: `relative mx-auto aspect-[9/19] w-full max-w-[17rem] overflow-hidden rounded-[2.4rem] border-[7px] border-fill bg-fill shadow-[0_40px_80px_-30px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_70%,transparent)] ${className}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-2 z-10 h-5 w-20 -translate-x-1/2 rounded-full bg-fill", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden rounded-[1.9rem] bg-surface", children: /* @__PURE__ */ jsx(MediaFill, { media: item }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `overflow-hidden rounded-2xl border border-surface/60 bg-surface shadow-[0_40px_80px_-35px_color-mix(in_srgb,var(--okjt-shadow,var(--color-ink))_55%,transparent)] ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-line bg-paper px-4 py-2.5", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[#E8C4B8]" }),
+      /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-line" }),
+      /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-[#C5D4B9]" }),
+      /* @__PURE__ */ jsx("span", { className: "ml-3 truncate rounded-full bg-surface px-3 py-0.5 text-[11px] text-muted", children: item.url })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "aspect-[16/10] bg-paper", children: /* @__PURE__ */ jsx(MediaFill, { media: item }) })
+  ] });
+}
+export {
+  MediaFill,
+  MediaFrame as default
+};

package/dist/Photo.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { usePhotos } from "./SiteProvider.js";
+const ROTATE_EVERY = 7e3;
+const asList = (image) => Array.isArray(image) ? image : [image];
+function Photo({ image, phoneImage, width = 1600, alt, position = "center", className = "", eager = false }) {
+  const images = asList(image);
+  const phones = phoneImage ? asList(phoneImage) : null;
+  const [index, setIndex] = useState(0);
+  const [failedSrc, setFailedSrc] = useState(null);
+  const reduceMotion = useReducedMotion();
+  const photos = usePhotos();
+  const url = (key, w) => photos.url(key, w);
+  const current = images[index % images.length];
+  const src = url(current, width);
+  const failed = failedSrc === src;
+  const label = alt ?? photos.alt(current) ?? "";
+  const rotating = images.length > 1 && !reduceMotion;
+  const nextSrc = rotating ? url(images[(index + 1) % images.length], width) : null;
+  useEffect(() => {
+    if (!rotating) return void 0;
+    new Image().src = nextSrc;
+    const id = setTimeout(() => setIndex((i) => i + 1), ROTATE_EVERY);
+    return () => clearTimeout(id);
+  }, [rotating, nextSrc, index]);
+  return /* @__PURE__ */ jsx("div", { className: `okjt-photo absolute inset-0 overflow-hidden bg-gradient-to-br from-accent-soft via-accent to-body ${className}`, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !failed && /* @__PURE__ */ jsxs(
+    motion.picture,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 1.4, ease: "easeInOut" },
+      className: "absolute inset-0",
+      children: [
+        phones && /* @__PURE__ */ jsx("source", { media: "(max-width: 640px) and (orientation: portrait)", srcSet: url(phones[index % phones.length], 900) }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: label,
+            loading: eager ? "eager" : "lazy",
+            decoding: "async",
+            onError: () => setFailedSrc(src),
+            style: { objectPosition: position },
+            className: "h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
+          }
+        )
+      ]
+    },
+    index
+  ) }) });
+}
+export {
+  Photo as default
+};

package/dist/PhotoHero.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import Photo from "./Photo.js";
+import { Container, Eyebrow } from "./ui.js";
+function HeroOrnament({ kind = "pill", className = "" }) {
+  if (kind === "hatch") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: `inline-block h-[0.55em] w-[2.2em] rounded-sm align-middle opacity-70 ${className}`,
+        style: { backgroundImage: "repeating-linear-gradient(-55deg, currentColor 0 1.5px, transparent 1.5px 9px)" }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `relative inline-block h-[0.55em] w-[2.6em] align-middle ${className}`, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx("span", { className: "absolute rounded-full border border-current opacity-60", style: { inset: `${i * 0.06}em ${i * 0.12}em` } }, i)) });
+}
+function PhotoHero({ image, phoneImage, eyebrow, title, text, children, feature, after, position = "center", tall = false }) {
+  return /* @__PURE__ */ jsxs("section", { className: "relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: `relative isolate overflow-hidden ${tall ? "min-h-[100svh] pb-56 sm:pb-64" : "min-h-[78svh] pb-24"} flex flex-col justify-center pt-32 text-white`, children: [
+      /* @__PURE__ */ jsx(Photo, { image, phoneImage, width: 2400, position, eager: true, className: "-z-20" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 bg-gradient-to-b from-ink-deep/70 via-ink-deep/35 to-ink-deep/60" }),
+      /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(motion.div, { initial: { opacity: 0, y: 24 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.7 }, className: "mx-auto max-w-5xl text-center", children: [
+        eyebrow && /* @__PURE__ */ jsx(Eyebrow, { light: true, children: eyebrow }),
+        /* @__PURE__ */ jsx("h1", { className: "mt-5 !font-display text-[2.75rem] !font-extralight leading-[1.02] tracking-tight !text-white sm:text-7xl lg:text-[6.25rem]", children: title }),
+        text && /* @__PURE__ */ jsx("div", { className: "mx-auto mt-6 max-w-2xl text-base leading-relaxed text-white/85 sm:text-lg", children: text }),
+        feature,
+        children && /* @__PURE__ */ jsx("div", { className: "mt-9 flex flex-col justify-center gap-3 sm:flex-row", children })
+      ] }) })
+    ] }),
+    after && /* @__PURE__ */ jsx(Container, { className: "relative z-10 -mt-44 sm:-mt-52", children: after })
+  ] });
+}
+export {
+  HeroOrnament,
+  PhotoHero as default
+};