@rizom/site-rizom-work 0.2.0-alpha.142

package/src/sections/personas/layout.tsx

@@ -0,0 +1,45 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { PersonasContent } from "./schema";
+
+export const PersonasLayout = ({
+  kicker,
+  headline,
+  cards,
+}: PersonasContent): JSX.Element => {
+  return (
+    <Section id="personas" className="reveal py-[128px] max-[768px]:py-20">
+      <div
+        className={`${WORK_RULE} mb-16 -mt-16 max-[768px]:-mt-10 max-[768px]:mb-12`}
+      />
+
+      <div className="mx-auto mb-[88px] max-w-[720px] text-center max-[768px]:mb-14">
+        <span className={`${WORK_KICKER} mb-3`}>{kicker}</span>
+        <h2 className="mt-3 font-display text-[clamp(36px,5vw,64px)] font-[520] leading-[1.02] tracking-[-1.5px] text-theme max-[768px]:text-[32px] max-[768px]:tracking-[-1px]">
+          {headline}
+        </h2>
+      </div>
+
+      <div className="mx-auto grid max-w-[1160px] grid-cols-2 gap-[72px] max-[1100px]:gap-12 max-[768px]:grid-cols-1 max-[768px]:gap-10">
+        {cards.map((card, i) => (
+          <div
+            key={card.label}
+            className={`reveal reveal-delay-${i + 1} flex flex-col gap-[22px] border-t border-[var(--color-work-divider-strong)] pt-14 max-[768px]:pt-10`}
+          >
+            <span className="font-label text-[11px] font-semibold uppercase tracking-[2.5px] text-secondary">
+              {card.label}
+            </span>
+            <p className="max-w-[500px] font-display text-[clamp(24px,2.6vw,32px)] italic leading-[1.2] tracking-[-0.6px] text-theme max-[768px]:text-[22px]">
+              {card.quote}
+            </p>
+            <p className="max-w-[500px] font-body text-[17px] leading-[1.75] text-theme-muted max-[768px]:text-[15px] max-[768px]:leading-[1.68]">
+              {card.body}
+            </p>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+};

package/src/sections/personas/schema.ts

@@ -0,0 +1,16 @@
+/**
+ * Runtime schema/formatter for personas now live in `src/site-content.ts`.
+ * Keep the props type local to the layout so app code does not depend on
+ * low-level template authoring primitives here.
+ */
+export interface PersonaCard {
+  label: string;
+  quote: string;
+  body: string;
+}
+
+export interface PersonasContent {
+  kicker: string;
+  headline: string;
+  cards: PersonaCard[];
+}

package/src/sections/problem/layout.tsx

@@ -0,0 +1,30 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section, renderHighlightedText } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_SECTION_HEADLINE } from "../styles";
+import type { WorkProblemContent } from "./schema";
+
+const HIGHLIGHT_CLS = "italic text-accent font-normal";
+
+export const WorkProblemLayout = ({
+  kicker,
+  headline,
+  subhead,
+}: WorkProblemContent): JSX.Element => {
+  return (
+    <Section
+      id="problem"
+      className="reveal bg-transparent py-[128px] text-center max-[768px]:py-20"
+    >
+      <span className={`${WORK_KICKER} mb-8 max-[768px]:mb-6`}>{kicker}</span>
+      <h2
+        className={`${WORK_SECTION_HEADLINE} mx-auto mb-7 max-w-[900px] max-[768px]:mb-5`}
+      >
+        {renderHighlightedText(headline, HIGHLIGHT_CLS)}
+      </h2>
+      <p className="mx-auto max-w-[720px] font-body text-[19px] leading-[1.72] text-theme-muted max-[768px]:text-[16px] max-[768px]:leading-[1.68]">
+        {subhead}
+      </p>
+    </Section>
+  );
+};

package/src/sections/problem/schema.ts

@@ -0,0 +1,10 @@
+/**
+ * Runtime schema/formatter for problem now live in `src/site-content.ts`.
+ * Keep the props type local to the layout so app code does not depend on
+ * low-level template authoring primitives here.
+ */
+export interface WorkProblemContent {
+  kicker: string;
+  headline: string;
+  subhead: string;
+}

package/src/sections/proof/layout.tsx

@@ -0,0 +1,124 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section } from "@rizom/site-rizom";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { ProofContent, ProofTestimonial } from "./schema";
+
+const ROTATOR_STEP_SECONDS = 6;
+
+const rotatorAnimationVars = (
+  index: number,
+  total: number,
+): JSX.CSSProperties =>
+  ({
+    "--rotator-duration": `${Math.max(total, 1) * ROTATOR_STEP_SECONDS}s`,
+    "--rotator-delay": `${index * ROTATOR_STEP_SECONDS}s`,
+  }) as JSX.CSSProperties;
+
+const QuoteMark = ({ large = false }: { large?: boolean }): JSX.Element => (
+  <span
+    aria-hidden="true"
+    className={
+      large
+        ? "pointer-events-none absolute -left-2 -top-10 font-display font-[300] italic text-[140px] leading-none text-accent/25 max-[768px]:-left-1 max-[768px]:-top-6 max-[768px]:text-[96px]"
+        : "pointer-events-none absolute -left-1.5 -top-9 font-display font-[300] italic text-[120px] leading-none text-accent/25 max-[768px]:-left-1 max-[768px]:-top-5 max-[768px]:text-[88px]"
+    }
+  >
+    “
+  </span>
+);
+
+export const ProofLayout = ({
+  kicker,
+  headline,
+  testimonials,
+  quote,
+  attribution,
+}: ProofContent): JSX.Element => {
+  const items: ProofTestimonial[] =
+    testimonials && testimonials.length > 0
+      ? testimonials
+      : quote
+        ? [{ quote, attribution: attribution ?? "" }]
+        : [];
+
+  return (
+    <Section
+      id="proof"
+      className="reveal py-[128px] text-center max-[768px]:py-20"
+    >
+      <div
+        className={`${WORK_RULE} mb-16 -mt-16 max-[768px]:-mt-10 max-[768px]:mb-12`}
+      />
+
+      <div className="mx-auto mb-16 max-w-[720px] text-center max-[768px]:mb-12">
+        <span className={`${WORK_KICKER} mb-3`}>{kicker}</span>
+        <h2 className="mt-3 font-display text-[clamp(32px,4.5vw,56px)] font-[520] leading-[1.05] tracking-[-1.4px] text-theme max-[768px]:text-[30px] max-[768px]:tracking-[-0.9px]">
+          {headline}
+        </h2>
+      </div>
+
+      {items.length > 1 ? (
+        <div className="reveal reveal-delay-1 mx-auto max-w-[920px]">
+          <div className="relative mx-auto px-10 py-8 text-left max-[768px]:px-4 max-[768px]:py-4">
+            <div className="relative min-h-[340px] max-[768px]:min-h-[500px] motion-reduce:min-h-0 motion-reduce:space-y-12">
+              {items.map((item, index) => (
+                <blockquote
+                  key={item.quote}
+                  style={rotatorAnimationVars(index, items.length)}
+                  className="absolute inset-0 pr-10 opacity-0 blur-[6px] translate-y-4 animate-[rizom-work-rotator-reveal_var(--rotator-duration)_cubic-bezier(0.2,0.8,0.2,1)_infinite] [animation-delay:var(--rotator-delay)] motion-reduce:relative motion-reduce:inset-auto motion-reduce:translate-y-0 motion-reduce:opacity-100 motion-reduce:blur-0 motion-reduce:animate-none max-[768px]:pr-0"
+                >
+                  <div className="relative">
+                    <QuoteMark large />
+                    <p className="relative mb-8 pl-16 font-display italic font-[380] text-[clamp(24px,3vw,38px)] leading-[1.28] tracking-[-0.7px] text-theme [font-variation-settings:'opsz'_96] max-[768px]:mb-7 max-[768px]:pl-9 max-[768px]:text-[22px] max-[768px]:leading-[1.32]">
+                      {item.quote}
+                    </p>
+                  </div>
+                  <footer className="pl-16 font-label text-[11px] font-medium uppercase tracking-[2px] text-theme-light max-[768px]:pl-9">
+                    — {item.attribution}
+                  </footer>
+                </blockquote>
+              ))}
+            </div>
+
+            <div
+              className="relative mt-8 flex justify-center gap-3 motion-reduce:hidden"
+              aria-hidden="true"
+            >
+              {items.map((item, index) => (
+                <span
+                  key={item.attribution + index}
+                  className="relative h-1.5 w-10 overflow-hidden rounded-full bg-theme-light/25"
+                >
+                  <span
+                    style={rotatorAnimationVars(index, items.length)}
+                    className="absolute inset-0 -translate-x-full rounded-full bg-accent animate-[rizom-work-rotator-progress_var(--rotator-duration)_linear_infinite] [animation-delay:var(--rotator-delay)]"
+                  />
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="mx-auto grid max-w-[980px] gap-12 max-[768px]:gap-10">
+          {items.map((item, index) => (
+            <blockquote
+              key={item.quote}
+              className={`reveal reveal-delay-${Math.min(index + 1, 3)} relative mx-auto max-w-[760px] px-10 text-left max-[768px]:px-4`}
+            >
+              <div className="relative">
+                <QuoteMark />
+                <p className="relative mb-7 pl-14 font-display italic font-[380] text-[clamp(22px,2.7vw,34px)] leading-[1.3] tracking-[-0.6px] text-theme [font-variation-settings:'opsz'_96] max-[768px]:pl-8 max-[768px]:text-[21px]">
+                  {item.quote}
+                </p>
+              </div>
+              <footer className="pl-14 font-label text-[11px] font-medium uppercase tracking-[2px] text-theme-light max-[768px]:pl-8">
+                — {item.attribution}
+              </footer>
+            </blockquote>
+          ))}
+        </div>
+      )}
+    </Section>
+  );
+};

package/src/sections/proof/schema.ts

@@ -0,0 +1,14 @@
+export interface ProofTestimonial {
+  quote: string;
+  attribution: string;
+}
+
+export interface ProofContent {
+  kicker: string;
+  headline: string;
+  testimonials?: ProofTestimonial[];
+  quote?: string;
+  attribution?: string;
+  partnersLabel?: string;
+  partners?: string[];
+}

package/src/sections/styles.ts

@@ -0,0 +1,16 @@
+export const WORK_KICKER =
+  "inline-flex items-center gap-[14px] font-label text-[11px] font-semibold uppercase tracking-[2.8px] text-accent before:content-[''] before:block before:h-px before:w-8 before:bg-accent before:opacity-80 max-[768px]:gap-3 max-[768px]:text-[10px] max-[768px]:tracking-[2.4px] max-[768px]:before:w-6";
+
+export const WORK_RULE =
+  "mx-auto h-px w-16 bg-gradient-to-r from-transparent via-accent/45 to-transparent";
+
+export const WORK_SECTION_HEADLINE =
+  "font-display font-[520] text-theme text-[clamp(36px,5vw,68px)] leading-[1.02] tracking-[-1.6px] max-[768px]:text-[34px] max-[768px]:tracking-[-1.1px]";
+
+export const WORK_DISPLAY_QUOTE =
+  "font-display italic tracking-[-0.6px] text-theme";
+
+export const WORK_BODY_COPY = "text-[17px] leading-[1.75] text-theme-muted";
+
+export const revealDelayClass = (index: number, max = 3): string =>
+  `reveal reveal-delay-${Math.min(index + 1, max)}`;

package/src/sections/workshop/layout.tsx

@@ -0,0 +1,66 @@
+/** @jsxImportSource preact */
+import type { JSX } from "preact";
+import { Section, renderHighlightedText } from "@rizom/site-rizom";
+import { WorkButton } from "../../link-targets";
+import { WORK_KICKER, WORK_RULE } from "../styles";
+import type { WorkshopContent } from "./schema";
+
+export const WorkshopLayout = ({
+  kicker,
+  headline,
+  intro,
+  steps,
+  ctaLabel,
+  ctaHref,
+}: WorkshopContent): JSX.Element => {
+  return (
+    <Section id="workshop" className="reveal py-[128px] max-[768px]:py-20">
+      <div
+        className={`${WORK_RULE} mb-16 -mt-16 max-[768px]:-mt-10 max-[768px]:mb-12`}
+      />
+
+      <div className="mx-auto mb-24 max-w-[720px] text-center max-[768px]:mb-14">
+        <span className={`${WORK_KICKER} mb-3`}>{kicker}</span>
+        <h2 className="mt-3 mb-7 font-display text-[clamp(36px,5vw,68px)] font-[520] leading-[1.02] tracking-[-1.6px] text-theme max-[768px]:text-[34px] max-[768px]:tracking-[-1.1px]">
+          {renderHighlightedText(headline, "")}
+        </h2>
+        <p className="mx-auto max-w-[640px] font-body text-[18px] leading-[1.72] text-theme-muted max-[768px]:text-[16px] max-[768px]:leading-[1.68]">
+          {intro}
+        </p>
+      </div>
+
+      <div className="mx-auto flex max-w-[960px] flex-col">
+        {steps.map((step, i) => (
+          <div
+            key={step.num + step.title}
+            className={`reveal reveal-delay-${i + 1} grid grid-cols-[240px_1fr] items-start gap-16 border-t border-[var(--color-work-divider-soft)] py-14 max-[1100px]:grid-cols-[200px_1fr] max-[1100px]:gap-10 max-[768px]:grid-cols-1 max-[768px]:gap-5 max-[768px]:py-10 ${i === steps.length - 1 ? "border-b" : ""}`}
+          >
+            <div className="flex items-baseline gap-[18px] pt-1.5 max-[768px]:gap-3.5">
+              <span className="font-display text-[68px] font-light leading-[0.82] tracking-[-3px] text-accent max-[1100px]:text-[56px] max-[768px]:text-[48px] max-[768px]:tracking-[-2px]">
+                {step.num}
+              </span>
+              <span className="mb-3.5 inline-block h-[1.5px] w-16 bg-accent/55 max-[768px]:w-12" />
+              <span className="font-label text-[11px] font-semibold uppercase tracking-[2.5px] text-theme-muted">
+                {step.label}
+              </span>
+            </div>
+            <div>
+              <h3 className="mb-4 font-display text-[28px] font-[520] leading-[1.2] tracking-[-0.6px] text-theme max-[768px]:text-[22px]">
+                {step.title}
+              </h3>
+              <p className="max-w-[560px] font-body text-[17px] leading-[1.72] text-theme-muted max-[768px]:text-[15px] max-[768px]:leading-[1.68]">
+                {step.body}
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-[72px] text-center max-[768px]:mt-12 max-[768px]:[&_.rizom-btn]:w-full max-[768px]:[&_.rizom-btn]:justify-center">
+        <WorkButton href={ctaHref} variant="primary">
+          {ctaLabel}
+        </WorkButton>
+      </div>
+    </Section>
+  );
+};

package/src/sections/workshop/schema.ts

@@ -0,0 +1,20 @@
+/**
+ * Runtime schema/formatter for workshop now live in `src/site-content.ts`.
+ * Keep the props type local to the layout so app code does not depend on
+ * low-level template authoring primitives here.
+ */
+export interface WorkshopStep {
+  num: string;
+  label: string;
+  title: string;
+  body: string;
+}
+
+export interface WorkshopContent {
+  kicker: string;
+  headline: string;
+  intro: string;
+  steps: WorkshopStep[];
+  ctaLabel: string;
+  ctaHref: string;
+}

package/src/site-content.ts

@@ -0,0 +1,227 @@
+import { WorkHeroLayout } from "./sections/hero/layout";
+import { WorkProblemLayout } from "./sections/problem/layout";
+import { WorkshopLayout } from "./sections/workshop/layout";
+import { PersonasLayout } from "./sections/personas/layout";
+import { ProofLayout } from "./sections/proof/layout";
+import { BridgeLayout } from "./sections/bridge/layout";
+import { CredibilityLayout } from "./sections/credibility/layout";
+import { OwnershipLayout } from "./sections/ownership/layout";
+import { CloserLayout } from "./sections/closer/layout";
+import type { SiteContentDefinition } from "@rizom/site";
+import { Ecosystem } from "@rizom/site-rizom";
+
+const workSiteContent: SiteContentDefinition = {
+  namespace: "landing-page",
+  sections: {
+    hero: {
+      description: "Rizom work hero — split studio intro with diagnostic panel",
+      title: "Work Hero Section",
+      layout: WorkHeroLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        subtitle: { label: "Subtitle", type: "string" },
+        primaryCtaLabel: { label: "Primary CTA label", type: "string" },
+        primaryCtaHref: { label: "Primary CTA href", type: "string" },
+        secondaryCtaLabel: { label: "Secondary CTA label", type: "string" },
+        secondaryCtaHref: { label: "Secondary CTA href", type: "string" },
+        verdictLabel: { label: "Verdict label", type: "string" },
+        verdictValue: { label: "Verdict value", type: "string" },
+        findingsLabel: { label: "Findings label", type: "string" },
+        findings: {
+          label: "Findings",
+          type: "array",
+          length: 3,
+          items: { label: "Finding", type: "string" },
+        },
+        diagnosticCtaLabel: { label: "Diagnostic CTA label", type: "string" },
+        diagnosticCtaHref: { label: "Diagnostic CTA href", type: "string" },
+      },
+    },
+    problem: {
+      description:
+        "Rizom work problem section — editorial coordination problem statement",
+      title: "Work Problem Section",
+      layout: WorkProblemLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        subhead: { label: "Subhead", type: "string" },
+      },
+    },
+    workshop: {
+      description: "Rizom workshop section — three-step TMS workshop process",
+      title: "Workshop Section",
+      layout: WorkshopLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        intro: { label: "Intro", type: "string" },
+        steps: {
+          label: "Steps",
+          type: "array",
+          length: 3,
+          items: {
+            label: "Step",
+            type: "object",
+            fields: {
+              num: { label: "Number", type: "string" },
+              label: { label: "Label", type: "string" },
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+            },
+          },
+        },
+        ctaLabel: { label: "CTA label", type: "string" },
+        ctaHref: { label: "CTA href", type: "string" },
+      },
+    },
+    credibility: {
+      description: "Rizom credibility section — TMS methodology proof cards",
+      title: "Credibility Section",
+      layout: CredibilityLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    personas: {
+      description: "Rizom personas section — who the workshop is for",
+      title: "Personas Section",
+      layout: PersonasLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              label: { label: "Label", type: "string" },
+              quote: { label: "Quote", type: "string" },
+              body: { label: "Body", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    proof: {
+      description: "Rizom proof section — testimonials",
+      title: "Proof Section",
+      layout: ProofLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        testimonials: {
+          label: "Testimonials",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Testimonial",
+            type: "object",
+            fields: {
+              quote: { label: "Quote", type: "string" },
+              attribution: { label: "Attribution", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    bridge: {
+      description: "Rizom bridge section — connective link to adjacent site",
+      title: "Bridge Section",
+      layout: BridgeLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        body: { label: "Body", type: "string" },
+        linkLabel: { label: "Link label", type: "string" },
+        linkHref: { label: "Link href", type: "string" },
+      },
+    },
+    ownership: {
+      description:
+        "Rizom ownership section — split about block with stacked people cards",
+      title: "Ownership Section",
+      layout: OwnershipLayout,
+      fields: {
+        kicker: { label: "Kicker", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              badge: { label: "Badge", type: "string" },
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+            },
+          },
+        },
+      },
+    },
+    closer: {
+      description: "Rizom closer section — final CTA pair",
+      title: "Closer Section",
+      layout: CloserLayout,
+      fields: {
+        preamble: { label: "Preamble", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        primaryCtaLabel: { label: "Primary CTA label", type: "string" },
+        primaryCtaHref: { label: "Primary CTA href", type: "string" },
+        secondaryCtaLabel: { label: "Secondary CTA label", type: "string" },
+        secondaryCtaHref: { label: "Secondary CTA href", type: "string" },
+      },
+    },
+    ecosystem: {
+      description:
+        "Rizom ecosystem section — 3-card grid of sibling rizom sites",
+      title: "Ecosystem Section",
+      layout: Ecosystem,
+      fields: {
+        eyebrow: { label: "Eyebrow", type: "string" },
+        headline: { label: "Headline", type: "string" },
+        cards: {
+          label: "Cards",
+          type: "array",
+          minItems: 1,
+          items: {
+            label: "Card",
+            type: "object",
+            fields: {
+              suffix: {
+                label: "Suffix",
+                type: "enum",
+                options: ["ai", "foundation", "work"],
+              },
+              title: { label: "Title", type: "string" },
+              body: { label: "Body", type: "string" },
+              linkLabel: { label: "Link Label", type: "string" },
+              linkHref: { label: "Link Href", type: "string" },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default workSiteContent;

package/src/site.ts

@@ -0,0 +1,19 @@
+/// <reference types="./types.d.ts" />
+
+import type { SiteDefinition } from "@rizom/site";
+import { createRizomSite } from "@rizom/site-rizom";
+import { WorkLayout } from "./layout";
+import { workRoutes } from "./routes";
+import workSiteContent from "./site-content";
+import themeOverride from "./theme.css" with { type: "text" };
+
+export const rizomWorkSite: SiteDefinition = createRizomSite({
+  packageName: "@rizom/site-rizom-work",
+  themeProfile: "studio",
+  layout: WorkLayout,
+  routes: workRoutes,
+  content: workSiteContent,
+  themeOverride,
+});
+
+export default rizomWorkSite;