npm - @conduction/docusaurus-preset - Versions diffs - 0.1.0 - Mend

@conduction/docusaurus-preset 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/MISSING_COMPONENTS.md +109 -0
package/README.md +171 -0
package/package.json +59 -0
package/src/components/AgentTrace/AgentTrace.jsx +128 -0
package/src/components/AgentTrace/AgentTrace.module.css +115 -0
package/src/components/AppMock/AppMock.jsx +86 -0
package/src/components/AppMock/AppMock.module.css +629 -0
package/src/components/AppMock/variants/DeciDeskMock.jsx +71 -0
package/src/components/AppMock/variants/DocuDeskMock.jsx +69 -0
package/src/components/AppMock/variants/LarpingAppMock.jsx +59 -0
package/src/components/AppMock/variants/MyDashBiMock.jsx +135 -0
package/src/components/AppMock/variants/MyDashMock.jsx +96 -0
package/src/components/AppMock/variants/MyDashTilesMock.jsx +103 -0
package/src/components/AppMock/variants/MyDashWidgetsMock.jsx +123 -0
package/src/components/AppMock/variants/NLDesignMock.jsx +70 -0
package/src/components/AppMock/variants/OpenCatalogiMock.jsx +61 -0
package/src/components/AppMock/variants/OpenConnectorMock.jsx +83 -0
package/src/components/AppMock/variants/OpenRegisterMock.jsx +100 -0
package/src/components/AppMock/variants/OpenWooMock.jsx +61 -0
package/src/components/AppMock/variants/PipelinQMock.jsx +88 -0
package/src/components/AppMock/variants/ProcestMock.jsx +87 -0
package/src/components/AppMock/variants/SoftwareCatalogMock.jsx +71 -0
package/src/components/AppMock/variants/ZaakAfhandelAppMock.jsx +71 -0
package/src/components/AppsGrid/AppsGrid.jsx +84 -0
package/src/components/AppsGrid/AppsGrid.module.css +46 -0
package/src/components/AppsPreview/AppsPreview.jsx +85 -0
package/src/components/AppsPreview/AppsPreview.module.css +128 -0
package/src/components/Clients/Clients.jsx +205 -0
package/src/components/Clients/Clients.module.css +166 -0
package/src/components/ComposeBlock/ComposeBlock.jsx +70 -0
package/src/components/ComposeBlock/ComposeBlock.module.css +74 -0
package/src/components/ConductionBg/ConductionBg.jsx +150 -0
package/src/components/ConductionBg/ConductionBg.module.css +41 -0
package/src/components/ContentCard/ContentCard.jsx +126 -0
package/src/components/ContentCard/ContentCard.module.css +84 -0
package/src/components/ContentDetailHero/ContentDetailHero.jsx +136 -0
package/src/components/ContentDetailHero/ContentDetailHero.module.css +96 -0
package/src/components/ContentTypeFilter/ContentTypeFilter.jsx +103 -0
package/src/components/ContentTypeFilter/ContentTypeFilter.module.css +60 -0
package/src/components/ContentTypeFilter/contentTypes.js +58 -0
package/src/components/CookieCli/CookieCli.jsx +223 -0
package/src/components/CookieCli/CookieCli.module.css +166 -0
package/src/components/CtaBanner/CtaBanner.jsx +61 -0
package/src/components/CtaBanner/CtaBanner.module.css +65 -0
package/src/components/DetailHero/DetailHero.jsx +143 -0
package/src/components/DetailHero/DetailHero.module.css +154 -0
package/src/components/Diagrams/Diagrams.jsx +148 -0
package/src/components/EmployeeCard/EmployeeCard.jsx +127 -0
package/src/components/EmployeeCard/EmployeeCard.module.css +144 -0
package/src/components/ExternalAppShelf/ExternalAppShelf.jsx +61 -0
package/src/components/ExternalAppShelf/ExternalAppShelf.module.css +90 -0
package/src/components/FAQ/FAQ.jsx +42 -0
package/src/components/FAQ/FAQ.module.css +74 -0
package/src/components/FacetedFilters/FacetedFilters.jsx +125 -0
package/src/components/FacetedFilters/FacetedFilters.module.css +133 -0
package/src/components/FeatureGrid/FeatureGrid.jsx +94 -0
package/src/components/FeatureGrid/FeatureGrid.module.css +114 -0
package/src/components/FeatureList/FeatureList.jsx +54 -0
package/src/components/FeatureList/FeatureList.module.css +52 -0
package/src/components/FeaturedCard/FeaturedCard.jsx +101 -0
package/src/components/FeaturedCard/FeaturedCard.module.css +98 -0
package/src/components/GameModal/GameModal.jsx +197 -0
package/src/components/GameModal/GameModal.module.css +184 -0
package/src/components/Hero/Hero.jsx +101 -0
package/src/components/Hero/Hero.module.css +95 -0
package/src/components/HexBackground/HexBackground.jsx +56 -0
package/src/components/HexBackground/HexBackground.module.css +73 -0
package/src/components/HexNetwork/HexNetwork.jsx +141 -0
package/src/components/HexNetwork/HexNetwork.module.css +187 -0
package/src/components/HexRain/HexRain.jsx +81 -0
package/src/components/HowSteps/HowSteps.jsx +57 -0
package/src/components/HowSteps/HowSteps.module.css +52 -0
package/src/components/ManagedCommonGround/ManagedCommonGround.jsx +78 -0
package/src/components/ManagedCommonGround/ManagedCommonGround.module.css +16 -0
package/src/components/NewsletterCta/NewsletterCta.jsx +83 -0
package/src/components/NewsletterCta/NewsletterCta.module.css +103 -0
package/src/components/PairCard/PairCard.jsx +58 -0
package/src/components/PairCard/PairCard.module.css +54 -0
package/src/components/PartnerCard/PartnerCard.jsx +130 -0
package/src/components/PartnerCard/PartnerCard.module.css +198 -0
package/src/components/PartnerDirectory/PartnerDirectory.jsx +122 -0
package/src/components/PartnerDirectory/PartnerDirectory.module.css +25 -0
package/src/components/PartnerSidecard/PartnerSidecard.jsx +116 -0
package/src/components/PartnerSidecard/PartnerSidecard.module.css +185 -0
package/src/components/Pipeline/Pipeline.jsx +198 -0
package/src/components/Pipeline/Pipeline.module.css +206 -0
package/src/components/PlatformDiagram/PlatformDiagram.jsx +110 -0
package/src/components/PlatformOverview/PlatformOverview.jsx +68 -0
package/src/components/PlatformOverview/PlatformOverview.module.css +71 -0
package/src/components/ReferenceCard/ReferenceCard.jsx +44 -0
package/src/components/ReferenceCard/ReferenceCard.module.css +57 -0
package/src/components/RelatedPosts/RelatedPosts.jsx +58 -0
package/src/components/RelatedPosts/RelatedPosts.module.css +51 -0
package/src/components/RotatingCards/RotatingCards.jsx +98 -0
package/src/components/RotatingCards/RotatingCards.module.css +153 -0
package/src/components/Showcase/Showcase.jsx +129 -0
package/src/components/Showcase/Showcase.module.css +168 -0
package/src/components/SolutionCard/SolutionCard.jsx +83 -0
package/src/components/SolutionCard/SolutionCard.module.css +99 -0
package/src/components/StatsStrip/StatsStrip.jsx +38 -0
package/src/components/StatsStrip/StatsStrip.module.css +53 -0
package/src/components/WidgetShelf/WidgetShelf.jsx +67 -0
package/src/components/WidgetShelf/WidgetShelf.module.css +73 -0
package/src/components/index.js +96 -0
package/src/components/primitives/AuthorByline.jsx +85 -0
package/src/components/primitives/AuthorByline.module.css +57 -0
package/src/components/primitives/BrandCitation.jsx +71 -0
package/src/components/primitives/Button.jsx +46 -0
package/src/components/primitives/Button.module.css +88 -0
package/src/components/primitives/Card.jsx +42 -0
package/src/components/primitives/Card.module.css +42 -0
package/src/components/primitives/Eyebrow.jsx +37 -0
package/src/components/primitives/Eyebrow.module.css +19 -0
package/src/components/primitives/HexBullet.jsx +37 -0
package/src/components/primitives/HexBullet.module.css +16 -0
package/src/components/primitives/HexThumbnail.jsx +70 -0
package/src/components/primitives/HexThumbnail.module.css +45 -0
package/src/components/primitives/Pill.jsx +42 -0
package/src/components/primitives/Pill.module.css +30 -0
package/src/components/primitives/Section.jsx +51 -0
package/src/components/primitives/Section.module.css +31 -0
package/src/components/primitives/SectionHead.jsx +36 -0
package/src/components/primitives/SectionHead.module.css +43 -0
package/src/components/primitives/index.js +22 -0
package/src/css/brand.css +158 -0
package/src/css/tokens.css +12 -0
package/src/data/app-downloads.js +42 -0
package/src/diagrams/README.md +74 -0
package/src/diagrams/cn-domain-tree.js +105 -0
package/src/diagrams/cn-hex-prism.js +163 -0
package/src/diagrams/cn-hex.js +181 -0
package/src/diagrams/cn-honeycomb-bg.js +135 -0
package/src/diagrams/cn-pipeline.js +150 -0
package/src/diagrams/cn-platform.js +156 -0
package/src/diagrams/cn-side-box.js +104 -0
package/src/diagrams/index.js +28 -0
package/src/index.js +183 -0
package/src/theme/Footer/index.jsx +516 -0
package/src/theme/MDXPage/index.jsx +134 -0
package/src/theme/Navbar/index.jsx +120 -0
package/src/theme/Navbar/styles.module.css +114 -0
package/src/theme/brand.jsx +63 -0
package/src/theme.js +45 -0
package/src/utils/lazyScript.js +37 -0
package/static/img/favicon.svg +14 -0
package/static/img/honeycomb-scatter.svg +23 -0
package/static/img/honeycomb-watermark.svg +108 -0
package/static/img/logo-dark.svg +11 -0
package/static/img/logo.svg +14 -0
package/static/img/nextcloud-logo.svg +5 -0
package/static/lib/canal-footer.css +418 -0
package/static/lib/canal-footer.js +499 -0
package/static/lib/clients-flow.js +317 -0
package/static/lib/conduction-bg.css +50 -0
package/static/lib/conduction-bg.js +122 -0
package/static/lib/hex-rain.css +128 -0
package/static/lib/hex-rain.js +284 -0
package/static/lib/kade-cyclist.css +264 -0
package/static/lib/kade-cyclist.js +420 -0
package/static/lib/logo-memory.css +219 -0
package/static/lib/logo-memory.js +540 -0
package/static/lib/platform-diagram.css +458 -0
package/static/lib/platform-diagram.js +414 -0

package/src/components/HexRain/HexRain.jsx ADDED Viewed

@@ -0,0 +1,81 @@
+/**
+ * <HexRain />
+ *
+ * The "Twelve apps" mini-game from preview/pages/landing.html. A
+ * decorative continuous spawn loop drops orange hexes from the top of
+ * the column; first click on any hex starts a 60-second collect-the-
+ * apps game (12 unique apps to find, score = unique apps collected).
+ * Game-end fires a `connext:gameend` event that the gaming-modal
+ * component picks up to update its cookie and reveal the cross-site
+ * progress panel.
+ *
+ * Mirrors preview/pages/landing.html .hex-rain. The actual game logic
+ * lives in sites/www/static/lib/hex-rain.js (266 lines of canvas-
+ * style imperative work that earns its place in plain JS, not JSX).
+ * This React wrapper:
+ *   - Renders the mount point with the right class names so the
+ *     runtime's selector matches
+ *   - Lazy-loads the runtime CSS+JS via Head (idempotent across SPA
+ *     route changes — the IIFE registers itself on first import,
+ *     window.HexRain.hydrate() picks up new nodes)
+ *   - Hooks into the runtime via useEffect so freshly-mounted nodes
+ *     hydrate even when the SPA navigates between routes
+ *
+ * Usage in MDX:
+ *
+ *   <Hero
+ *     eyebrow="..."
+ *     title="..."
+ *     primaryCta={{...}}
+ *   >
+ *     <HexRain />
+ *   </Hero>
+ */
+import React, {useEffect, useRef} from 'react';
+import Head from '@docusaurus/Head';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useLazyScript} from '../../utils/lazyScript';
+const ASSET_BASE = '/lib';
+export default function HexRain({ariaLabel = 'Twelve apps mini-game, click each falling icon to collect the app', className}) {
+  const isBrowser = useIsBrowser();
+  const ref = useRef(null);
+  /* hex-rain.js is loaded post-hydration via this hook so the runtime's
+     DOM mutations don't trip React's hydration mismatch. See
+     utils/lazyScript.js. */
+  useLazyScript(ASSET_BASE + '/hex-rain.js', 'hex-rain');
+  /* The runtime exposes window.HexRain.hydrate() once it has registered
+     itself. Poll one rAF tick per frame until it's there, then call it
+     to attach the spawn loop to this mount point. */
+  useEffect(() => {
+    if (!isBrowser) return;
+    let cancelled = false;
+    function tryHydrate() {
+      if (cancelled) return;
+      if (window.HexRain?.hydrate) {
+        window.HexRain.hydrate();
+        return;
+      }
+      requestAnimationFrame(tryHydrate);
+    }
+    tryHydrate();
+    return () => { cancelled = true; };
+  }, [isBrowser]);
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href={ASSET_BASE + '/hex-rain.css'} />
+      </Head>
+      <div
+        ref={ref}
+        className={['hex-rain', className].filter(Boolean).join(' ')}
+        aria-label={ariaLabel}
+      />
+    </>
+  );
+}

package/src/components/HowSteps/HowSteps.jsx ADDED Viewed

@@ -0,0 +1,57 @@
+/**
+ * <HowSteps /> + <HowStep />
+ *
+ * Numbered process-step row, surfaced from preview/pages/support.html
+ * (.how-row, .how-step). Three or more cards in a row with a tinted
+ * hex number indicator and a heading + body. Used on:
+ *   - /support  ("How to get help, in three steps")
+ *   - /install  ("How install works, three steps")
+ *   - /partners/become  ("Partner programme, three tiers")
+ *
+ * Each step's number-hex tints alternately by tier: cobalt, KNVB
+ * orange, cobalt-700. Pass `tier="1|2|3"` to override.
+ *
+ * Usage:
+ *
+ *   <HowSteps>
+ *     <HowStep number="1" title="Read the docs first.">
+ *       The /docs section covers most of what we'd answer in support.
+ *     </HowStep>
+ *     <HowStep number="2" title="Open a GitHub issue.">
+ *       For bugs and feature requests. We triage daily.
+ *     </HowStep>
+ *     <HowStep number="3" title="Talk to a partner.">
+ *       For implementation help, hosting, and rollout.
+ *     </HowStep>
+ *   </HowSteps>
+ */
+import React, {Children, cloneElement, isValidElement} from 'react';
+import styles from './HowSteps.module.css';
+export function HowStep({number, tier, title, children, className}) {
+  const tierKey = tier || (number ? String(((parseInt(number, 10) - 1) % 3) + 1) : '1');
+  const composed = [styles.step, styles['tier-' + tierKey], className].filter(Boolean).join(' ');
+  return (
+    <div className={composed}>
+      {number && <div className={styles.num}>{number}</div>}
+      {title && <h3 className={styles.title}>{title}</h3>}
+      {/* div not p: MDX may wrap inline children in its own <p>, which
+          would be invalid nested inside another <p>. */}
+      {children && <div className={styles.body}>{children}</div>}
+    </div>
+  );
+}
+export default function HowSteps({columns = 3, children, className}) {
+  /* Auto-number children that don't pass an explicit `number`. Lets
+     callers write `<HowStep title="...">body</HowStep>` without
+     book-keeping. */
+  const numbered = Children.map(children, (child, i) => {
+    if (!isValidElement(child)) return child;
+    if (child.props.number != null) return child;
+    return cloneElement(child, {number: i + 1});
+  });
+  const composed = [styles.row, styles['cols-' + columns], className].filter(Boolean).join(' ');
+  return <div className={composed}>{numbered}</div>;
+}

package/src/components/HowSteps/HowSteps.module.css ADDED Viewed

@@ -0,0 +1,52 @@
+/**
+ * <HowSteps /> styles. Mirrors .how-row + .how-step from support.html.
+ */
+.row { display: grid; gap: 24px; font-family: var(--conduction-typography-font-family-body); }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
+.step {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  position: relative;
+}
+.num {
+  width: 48px;
+  height: 56px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-blue-cobalt);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 18px;
+  font-family: var(--conduction-typography-font-family-code);
+}
+.tier-1 .num { background: var(--c-blue-cobalt); }
+.tier-2 .num { background: var(--c-orange-knvb); }
+.tier-3 .num { background: var(--c-cobalt-700); }
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 0 0 10px;
+  color: var(--c-cobalt-900);
+}
+.body {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 0;
+}
+.body :global(.next-blue) { color: var(--c-nextcloud-blue); }

package/src/components/ManagedCommonGround/ManagedCommonGround.jsx ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * <ManagedCommonGround />
+ *
+ * Section that pitches the managed Common Ground+ tenant: a SectionHead,
+ * a centred CTA pair, a PairRow of the components on offer, and a
+ * compliance footnote. Same shape on /support and /commonground;
+ * keeping it as a shared component prevents copy drift between the
+ * two surfaces (price changes, new components, eligibility tweaks
+ * land once and propagate).
+ *
+ * Content is passed as props so callers can localise per page (NL +
+ * EN MDX twins). The component owns layout and brand-look only.
+ *
+ * Usage in MDX:
+ *
+ *   <ManagedCommonGround
+ *     eyebrow="Managed Common Ground"
+ *     title={<>A government-only Nextcloud framework.<br/>€250 per component per month.</>}
+ *     lede={<>For public-sector clients we run a managed <NextBlue>Nextcloud</NextBlue> tenant...</>}
+ *     primaryCta={{label: 'Talk to us', href: 'mailto:info@conduction.nl'}}
+ *     secondaryCta={{label: 'Compliance signals', href: '/iso'}}
+ *     components={[
+ *       {name: 'OpenRegister', href: '/apps/openregister', why: 'Typed register store...', icon: <svg>...</svg>},
+ *       ...
+ *     ]}
+ *     footnote="Available to public-sector clients only..."
+ *   />
+ */
+import React from 'react';
+import Section from '../primitives/Section';
+import SectionHead from '../primitives/SectionHead';
+import Button from '../primitives/Button';
+import PairCard, {PairRow} from '../PairCard/PairCard';
+import styles from './ManagedCommonGround.module.css';
+export default function ManagedCommonGround({
+  eyebrow,
+  title,
+  lede,
+  primaryCta,
+  secondaryCta,
+  components = [],
+  footnote,
+  background,
+  spacing = 'default',
+}) {
+  return (
+    <Section spacing={spacing} background={background}>
+      <SectionHead eyebrow={eyebrow} title={title} lede={lede} align="stack" />
+      {(primaryCta || secondaryCta) && (
+        <div className={styles.actions}>
+          {primaryCta && (
+            <Button variant="primary" size="lg" href={primaryCta.href}>
+              {primaryCta.label}
+            </Button>
+          )}
+          {secondaryCta && (
+            <Button variant="secondary" size="lg" href={secondaryCta.href}>
+              {secondaryCta.label}
+            </Button>
+          )}
+        </div>
+      )}
+      {components.length > 0 && (
+        <PairRow columns={3}>
+          {components.map((c, i) => (
+            <PairCard key={i} href={c.href} icon={c.icon} name={c.name} why={c.why} />
+          ))}
+        </PairRow>
+      )}
+      {footnote && <p className={styles.footnote}>{footnote}</p>}
+    </Section>
+  );
+}

package/src/components/ManagedCommonGround/ManagedCommonGround.module.css ADDED Viewed

@@ -0,0 +1,16 @@
+.actions {
+  display: flex;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: var(--space-8);
+  justify-content: center;
+}
+.footnote {
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+  text-align: center;
+  margin: var(--space-5) auto 0;
+  max-width: 64ch;
+  line-height: 1.55;
+}

package/src/components/NewsletterCta/NewsletterCta.jsx ADDED Viewed

@@ -0,0 +1,83 @@
+/**
+ * <NewsletterCta />
+ *
+ * Cobalt-50 panel with title, lede, an email input, a submit button,
+ * and a fineprint line. Used at the bottom of the academy landing
+ * and on detail pages.
+ *
+ * The form is unwired by default (`onSubmit` no-op, `action` left
+ * empty). Pass an `action` URL or an `onSubmit` handler to wire it.
+ * Pass `inverse` to render on a cobalt-900 ground for use inside dark
+ * sections.
+ *
+ * Usage in MDX:
+ *
+ *   <NewsletterCta
+ *     title="New posts in your inbox, monthly."
+ *     lede="One mail a month. New guides, case studies, webinars."
+ *     placeholder="je@bedrijf.nl"
+ *     submitLabel="Subscribe"
+ *     fineprint="We mail vanuit info@conduction.nl. Geen lijstverkoop."
+ *   />
+ */
+import React from 'react';
+import styles from './NewsletterCta.module.css';
+export default function NewsletterCta({
+  title,
+  lede,
+  placeholder = 'jij@bedrijf.nl',
+  submitLabel = 'Aanmelden',
+  fineprint,
+  action,
+  method = 'POST',
+  name = 'email',
+  inverse = false,
+  onSubmit,
+  className,
+}) {
+  const composed = [
+    styles.cta,
+    inverse ? styles.inverse : null,
+    className,
+  ].filter(Boolean).join(' ');
+  const handleSubmit = (event) => {
+    if (onSubmit) {
+      onSubmit(event);
+    } else if (!action) {
+      event.preventDefault();
+    }
+  };
+  return (
+    <section className={composed}>
+      <div className={styles.copy}>
+        {title && <h3 className={styles.title}>{title}</h3>}
+        {lede && <p className={styles.lede}>{lede}</p>}
+      </div>
+      <div className={styles.form}>
+        <form
+          className={styles.formRow}
+          action={action || undefined}
+          method={method}
+          onSubmit={handleSubmit}
+        >
+          <input
+            type="email"
+            name={name}
+            className={styles.input}
+            placeholder={placeholder}
+            aria-label={placeholder}
+            required
+          />
+          <button type="submit" className={styles.submit}>
+            {submitLabel}
+          </button>
+        </form>
+        {fineprint && <p className={styles.fineprint}>{fineprint}</p>}
+      </div>
+    </section>
+  );
+}

package/src/components/NewsletterCta/NewsletterCta.module.css ADDED Viewed

@@ -0,0 +1,103 @@
+/**
+ * <NewsletterCta /> styles. Mirrors .newsletter-cta in
+ * preview/components/academy.css.
+ */
+.cta {
+  display: grid;
+  grid-template-columns: 1.1fr 1fr;
+  gap: var(--space-12);
+  padding: var(--space-12);
+  background: var(--c-cobalt-50);
+  border-radius: var(--radius-xl);
+  align-items: center;
+  font-family: var(--conduction-typography-font-family-body);
+}
+@media (max-width: 900px) {
+  .cta { grid-template-columns: 1fr; padding: var(--space-8); }
+}
+.copy { min-width: 0; }
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-3);
+  line-height: 1.2;
+}
+.lede {
+  font-size: 16px;
+  color: var(--c-cobalt-700);
+  margin: 0;
+  line-height: 1.55;
+  max-width: 42ch;
+}
+.form { min-width: 0; }
+.formRow {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+.input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  background: white;
+  color: var(--c-cobalt-900);
+  font-family: var(--conduction-typography-font-family-body);
+  font-size: 14px;
+  min-width: 0;
+}
+.input::placeholder { color: var(--c-cobalt-400); }
+.input:focus {
+  outline: none;
+  border-color: var(--c-blue-cobalt);
+}
+.submit {
+  padding: 12px 22px;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: var(--c-blue-cobalt);
+  color: white;
+  font-weight: 600;
+  font-size: 14px;
+  font-family: var(--conduction-typography-font-family-body);
+  cursor: pointer;
+  transition: background 120ms ease;
+  flex-shrink: 0;
+}
+.submit:hover { background: var(--c-cobalt-700); }
+.fineprint {
+  margin: var(--space-3) 0 0;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  font-family: var(--conduction-typography-font-family-code);
+  letter-spacing: 0.04em;
+}
+/* Inverse variant for placement inside dark sections. */
+.inverse {
+  background: var(--c-cobalt-900);
+  color: white;
+}
+.inverse .title { color: white; }
+.inverse .lede { color: var(--c-cobalt-200); }
+.inverse .input {
+  background: var(--c-cobalt-800);
+  border-color: var(--c-cobalt-700);
+  color: white;
+}
+.inverse .input::placeholder { color: var(--c-cobalt-300); }
+.inverse .input:focus { border-color: white; }
+.inverse .submit { background: white; color: var(--c-cobalt-900); }
+.inverse .submit:hover { background: var(--c-cobalt-50); }
+.inverse .fineprint { color: var(--c-cobalt-300); }

package/src/components/PairCard/PairCard.jsx ADDED Viewed

@@ -0,0 +1,58 @@
+/**
+ * <PairCard /> + <PairRow />
+ *
+ * Compact "related item" card from preview/components/pair-cards.html.
+ * Used as the "Pairs well with" / "See also" row on app and solution
+ * detail pages. Smaller and denser than <AppCard/>.
+ *
+ * Visual: cobalt icon-hex on the left, name + why on the right.
+ *
+ * Brand icons (Nextcloud, Common Ground+) ship with their own hex
+ * fill and ink colour per the design-system rule. Pass iconBg +
+ * iconColor to override the default cobalt + white pair, and the
+ * card switches to the "brand" icon-wrap variant: the SVG renders
+ * as a filled mark instead of a stroke-only glyph.
+ *
+ * Usage:
+ *
+ *   <PairRow>
+ *     <PairCard
+ *       href="/apps/opencatalogi"
+ *       icon={<svg>...</svg>}
+ *       name="OpenCatalogi"
+ *       why="Surfaces every register as a public, searchable catalog entry."
+ *     />
+ *     <PairCard
+ *       href="/connext"
+ *       icon={<svg>{nextcloud logo}</svg>}
+ *       iconBg="var(--c-nextcloud-blue)"
+ *       iconColor="white"
+ *       name={<>Con<NextBlue>Next</NextBlue></>}
+ *       why="..."
+ *     />
+ *   </PairRow>
+ */
+import React from 'react';
+import styles from './PairCard.module.css';
+export function PairRow({columns = 3, children, className}) {
+  const composed = [styles.row, styles['cols-' + columns], className].filter(Boolean).join(' ');
+  return <div className={composed}>{children}</div>;
+}
+export default function PairCard({href, icon, iconBg, iconColor, name, why, className}) {
+  const Tag = href ? 'a' : 'div';
+  const isBrand = Boolean(iconBg || iconColor);
+  const wrapClass = [styles.iconWrap, isBrand && styles.iconWrapBrand].filter(Boolean).join(' ');
+  const wrapStyle = isBrand ? {background: iconBg, color: iconColor} : undefined;
+  return (
+    <Tag href={href} className={[styles.card, className].filter(Boolean).join(' ')}>
+      <div className={wrapClass} style={wrapStyle}>{icon}</div>
+      <div>
+        {name && <div className={styles.name}>{name}</div>}
+        {why && <div className={styles.why}>{why}</div>}
+      </div>
+    </Tag>
+  );
+}

package/src/components/PairCard/PairCard.module.css ADDED Viewed

@@ -0,0 +1,54 @@
+/**
+ * <PairCard /> styles. Mirrors pair-cards.css exactly.
+ */
+.row { display: grid; gap: 16px; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
+.card {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  transition: all 160ms ease;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.card:hover {
+  border-color: var(--c-blue-cobalt);
+  transform: translateY(-1px);
+  text-decoration: none;
+  color: inherit;
+}
+.iconWrap {
+  width: 44px;
+  height: 50px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-blue-cobalt);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.iconWrap svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
+/* Brand-icon variant: the SVG is a filled brand mark (Nextcloud logo,
+   Common Ground logo) rather than a stroke-only glyph. Override the
+   stroke-only rule so the logo renders solid in its currentColor. */
+.iconWrapBrand svg {
+  width: auto;
+  height: 22px;
+  fill: currentColor;
+  stroke: none;
+}
+.name { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--c-cobalt-900); }
+.why { font-size: 13px; color: var(--c-cobalt-700); line-height: 1.5; }