@birdycom/omniaui-react 0.0.0-stage → 0.11.0

package/src/blocks/BlockFormPage.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from "react";
+import type { FormHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockFormPageProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** Sticky action bar content (cancel + save buttons). */
+  actions?: ReactNode;
+}
+
+/** `form.oc-block-formpage`: collapsible sections (children) with a sticky action bar. */
+export const BlockFormPage = forwardRef<HTMLFormElement, BlockFormPageProps>(function BlockFormPage(
+  { actions, className, children, ...rest },
+  ref,
+) {
+  return (
+    <form ref={ref} className={cx("oc-block-formpage", className)} {...rest}>
+      {children}
+      {actions != null && <div className="oc-block-formpage-actions">{actions}</div>}
+    </form>
+  );
+});
+
+/** `.oc-block-formpage-grid`: two-column field grid from 40rem. */
+export function BlockFormPageGrid({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("oc-block-formpage-grid", className)} {...rest} />;
+}

package/src/blocks/BlockHero.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockHeroProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Small badge above the headline. */
+  badge?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Buttons row (`oc-block-hero-actions`). */
+  actions?: ReactNode;
+}
+
+/** `.oc-block-hero`: centered hero with badge, headline, text and actions. */
+export const BlockHero = forwardRef<HTMLDivElement, BlockHeroProps>(function BlockHero(
+  { badge, title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-hero", className)} {...rest}>
+      {badge != null && <span className="oc-block-hero-badge">{badge}</span>}
+      <h1>{title}</h1>
+      {description != null && <p>{description}</p>}
+      {actions != null && <div className="oc-block-hero-actions">{actions}</div>}
+    </div>
+  );
+});

package/src/blocks/BlockHeroCode.tsx

@@ -0,0 +1,63 @@
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface HeroTile {
+  glyph: ReactNode;
+  accent: string;
+  style: CSSProperties;
+}
+
+const DEFAULT_TILES: HeroTile[] = [
+  { glyph: "◆", accent: "green", style: { inset: "-0.5rem auto auto 8%" } },
+  { glyph: "◉", accent: "violet", style: { inset: "0 6% auto auto", animationDelay: "-2s" } },
+  { glyph: "▲", accent: "orange", style: { inset: "auto 10% -0.5rem auto", animationDelay: "-4s" } },
+];
+
+export interface BlockHeroCodeProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  /** Buttons (usually two `oc-btn--gradient` / `oc-btn--glass` links). */
+  actions?: ReactNode;
+  /** File name in the code window bar. */
+  codeTitle?: ReactNode;
+  /** Code shown in the window. */
+  code: string;
+  /** Floating icon tiles (accent name from the accent palette + position style). */
+  tiles?: HeroTile[];
+}
+
+/** Landing hero: eyebrow, display title, lead, buttons and a code window with floating icon tiles. */
+export const BlockHeroCode = forwardRef<HTMLElement, BlockHeroCodeProps>(function BlockHeroCode(
+  { eyebrow, title, lead, actions, codeTitle, code, tiles = DEFAULT_TILES, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container oc-split">
+        <div>
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h1 className="oc-display">{title}</h1>
+          {lead != null && <p className="oc-lead">{lead}</p>}
+          {actions != null && <div className="flex flex-wrap gap-1 mt-2">{actions}</div>}
+        </div>
+        <div className="relative p-2">
+          {tiles.map((tile, i) => (
+            <span key={i} className={`oc-icon-tile oc-icon-tile--float oc-accent--${tile.accent} absolute`} style={tile.style} aria-hidden="true">
+              {tile.glyph}
+            </span>
+          ))}
+          <div className="oc-code-window">
+            <div className="oc-code-window__bar">
+              <i /><i /><i />
+              {codeTitle != null && <span className="oc-code-window__title">{codeTitle}</span>}
+            </div>
+            <pre className="oc-code-window__body">{code}</pre>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockHeroOrbit.tsx

@@ -0,0 +1,73 @@
+// File: packages/react/src/blocks/BlockHeroOrbit.tsx | Map: types + defaults -> BlockHeroOrbit (copy -> visual: ring with marks + center)
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface HeroOrbitMark {
+  glyph: ReactNode;
+  /** Accent preset (green, violet, orange, cyan, red, yellow, blue). */
+  accent: string;
+}
+
+const DEFAULT_MARKS: HeroOrbitMark[] = [
+  { glyph: "◆", accent: "green" },
+  { glyph: "◉", accent: "violet" },
+  { glyph: "▲", accent: "orange" },
+  { glyph: "★", accent: "cyan" },
+  { glyph: "♥", accent: "red" },
+  { glyph: "☀", accent: "yellow" },
+];
+
+export interface BlockHeroOrbitProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  actions?: ReactNode;
+  /** Marks on the ring; they are spread evenly. */
+  marks?: HeroOrbitMark[];
+  codeTitle?: ReactNode;
+  code?: string;
+  /** Replaces the code window in the center. Give it className="oc-block-orbit-center". */
+  center?: ReactNode;
+  /** One turn, e.g. "30s" (default 60s). */
+  duration?: string;
+}
+
+/** Hero with a code window and product marks that orbit around it. */
+export const BlockHeroOrbit = forwardRef<HTMLElement, BlockHeroOrbitProps>(function BlockHeroOrbit(
+  { eyebrow, title, lead, actions, marks = DEFAULT_MARKS, codeTitle, code = "", center, duration, className, ...rest },
+  ref,
+) {
+  const visualStyle = duration ? ({ "--oc-orbit-duration": duration } as CSSProperties) : undefined;
+  return (
+    <section ref={ref} className={cx("oc-block-orbit oc-section-pad", className)} {...rest}>
+      <div className="oc-container oc-split">
+        <div>
+          {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+          <h1 className="oc-display">{title}</h1>
+          {lead != null && <p className="oc-lead">{lead}</p>}
+          {actions != null && <div className="flex flex-wrap gap-1 mt-2">{actions}</div>}
+        </div>
+        <div className="oc-block-orbit-visual" style={visualStyle}>
+          <div className="oc-block-orbit-ring" aria-hidden="true">
+            {marks.map((mark, i) => (
+              <span key={i} className="oc-block-orbit-mark" style={{ "--oc-orbit-angle": `${(360 / marks.length) * i}deg` } as CSSProperties}>
+                <span className={`oc-product-mark oc-product-mark--sm oc-accent--${mark.accent}`}>{mark.glyph}</span>
+              </span>
+            ))}
+          </div>
+          {center ?? (
+            <div className="oc-code-window oc-block-orbit-center">
+              <div className="oc-code-window__bar">
+                <i /><i /><i />
+                {codeTitle != null && <span className="oc-code-window__title">{codeTitle}</span>}
+              </div>
+              <pre className="oc-code-window__body">{code}</pre>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockHeroSplit.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockHeroSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  /** Right column (image, screenshot, placeholder). */
+  visual?: ReactNode;
+}
+
+/** `.oc-block-hero-split`: text on the left, visual on the right. */
+export const BlockHeroSplit = forwardRef<HTMLDivElement, BlockHeroSplitProps>(function BlockHeroSplit(
+  { title, description, actions, visual, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-hero-split", className)} {...rest}>
+      <div>
+        <h1>{title}</h1>
+        {description != null && <p>{description}</p>}
+        {actions != null && <div className="oc-block-hero-actions justify-start">{actions}</div>}
+      </div>
+      <div className="oc-block-hero-visual">{visual}</div>
+    </div>
+  );
+});

package/src/blocks/BlockModuleHeader.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockModuleHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  /** Inline SVG in the icon tile. */
+  icon?: ReactNode;
+  title: ReactNode;
+  intro?: ReactNode;
+  /** Badges under the title. */
+  meta?: ReactNode;
+  /** Buttons below the band (back link, primary action). */
+  actions?: ReactNode;
+}
+
+/** `.oc-block-modulehead`: page header with icon tile, title, intro, meta badges and actions. */
+export const BlockModuleHeader = forwardRef<HTMLElement, BlockModuleHeaderProps>(function BlockModuleHeader(
+  { icon, title, intro, meta, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <header ref={ref} className={cx("oc-block-modulehead", className)} {...rest}>
+      <div className="oc-block-modulehead-band">
+        {icon != null && <span className="oc-block-modulehead-icon" aria-hidden="true">{icon}</span>}
+        <div className="oc-block-modulehead-body">
+          <h1 className="oc-block-modulehead-title">{title}</h1>
+          {intro != null && <p className="oc-block-modulehead-intro">{intro}</p>}
+          {meta != null && <div className="oc-block-modulehead-meta">{meta}</div>}
+        </div>
+      </div>
+      {actions != null && <div className="oc-block-modulehead-actions">{actions}</div>}
+    </header>
+  );
+});

package/src/blocks/BlockPageHero.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface BlockPageHeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+/** `.oc-hero`: page header with eyebrow, title, text and actions. */
+export const BlockPageHero = forwardRef<HTMLElement, BlockPageHeroProps>(function BlockPageHero(
+  { eyebrow, title, description, actions, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-hero", className)} {...rest}>
+      {eyebrow != null && <span className="oc-hero-eyebrow">{eyebrow}</span>}
+      <h1 className="oc-hero-title">{title}</h1>
+      {description != null && <p className="oc-hero-text">{description}</p>}
+      {actions != null && <div className="oc-hero-actions">{actions}</div>}
+    </section>
+  );
+});

package/src/blocks/BlockPortfolioGrid.tsx

@@ -0,0 +1,50 @@
+// File: packages/react/src/blocks/BlockPortfolioGrid.tsx | Map: types -> BlockPortfolioGrid (head (title, lead, link) -> grid of ProjectCard)
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { ProjectCard } from "../components/ProjectCard";
+import type { ProjectCardProps } from "../components/ProjectCard";
+
+export type PortfolioGridProject = ProjectCardProps & {
+  /** Accent preset for the card (green, violet, ...). */
+  accent?: string;
+};
+
+export interface BlockPortfolioGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  lead?: ReactNode;
+  /** Link at the right of the head, e.g. <LinkArrow href="/work">All projects</LinkArrow>. */
+  link?: ReactNode;
+  projects: PortfolioGridProject[];
+  /** Wider cards. */
+  two?: boolean;
+}
+
+/** `.oc-block-portfolio`: heading plus a grid of project cards. */
+export const BlockPortfolioGrid = forwardRef<HTMLElement, BlockPortfolioGridProps>(function BlockPortfolioGrid(
+  { eyebrow, title, lead, link, projects, two = false, className, ...rest },
+  ref,
+) {
+  const titleId = `oc-portfolio-title-${useId().replace(/[^\w-]/g, "")}`;
+  return (
+    <section ref={ref} className={cx("oc-block-portfolio oc-section-pad", two && "oc-block-portfolio--two", className)} aria-labelledby={titleId} {...rest}>
+      <div className="oc-container">
+        <div className="oc-block-portfolio-head">
+          <div>
+            {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+            <h2 className="oc-display oc-display--md" id={titleId}>{title}</h2>
+            {lead != null && <p className="oc-block-portfolio-lead">{lead}</p>}
+          </div>
+          {link}
+        </div>
+        <div className="oc-block-portfolio-grid">
+          {projects.map(({ accent, className: cardClass, ...card }, i) => (
+            <ProjectCard key={i} className={cx(accent && `oc-accent--${accent}`, cardClass)} {...card} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockPricing.tsx

@@ -0,0 +1,62 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { Button, ButtonLink } from "../components/Button";
+
+export interface PricingPlan {
+  name: ReactNode;
+  description?: ReactNode;
+  price: ReactNode;
+  /** e.g. `/month` */
+  period?: ReactNode;
+  features: ReactNode[];
+  /** Highlighted plan (`oc-block-pricing-card--featured`, primary button). */
+  featured?: boolean;
+  /** Button label. */
+  action: ReactNode;
+  /** Renders the action as a link when set. */
+  href?: string;
+  onAction?: () => void;
+}
+
+export interface BlockPricingProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: ReactNode;
+  description?: ReactNode;
+  plans: PricingPlan[];
+}
+
+/** `.oc-block-pricing`: pricing cards with a featured plan. */
+export const BlockPricing = forwardRef<HTMLDivElement, BlockPricingProps>(function BlockPricing(
+  { title, description, plans, className, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} className={cx("oc-block-pricing", className)} {...rest}>
+      {title != null && <h2>{title}</h2>}
+      {description != null && <p>{description}</p>}
+      <div className="oc-block-pricing-grid">
+        {plans.map((plan, i) => {
+          const variant = plan.featured ? "default" : "outline";
+          return (
+            <div className={cx("oc-block-pricing-card", plan.featured && "oc-block-pricing-card--featured")} key={i}>
+              <p className="oc-block-pricing-name">{plan.name}</p>
+              {plan.description != null && <p className="oc-block-pricing-desc">{plan.description}</p>}
+              <p className="oc-block-pricing-price">
+                {plan.price}
+                {plan.period != null && <> <span>{plan.period}</span></>}
+              </p>
+              <ul className="oc-block-pricing-features">
+                {plan.features.map((f, j) => <li key={j}>{f}</li>)}
+              </ul>
+              {plan.href ? (
+                <ButtonLink variant={variant} href={plan.href} style={{ width: "100%" }}>{plan.action}</ButtonLink>
+              ) : (
+                <Button variant={variant} style={{ width: "100%" }} onClick={plan.onAction}>{plan.action}</Button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

package/src/blocks/BlockProcess.tsx

@@ -0,0 +1,50 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProcessStep {
+  title: ReactNode;
+  text?: ReactNode;
+}
+
+export interface BlockProcessProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  steps: ProcessStep[];
+  /** Items of the endless marquee (strings). The list is repeated once for the seamless loop. */
+  marquee?: string[];
+  marqueeLabel?: string;
+}
+
+/** Numbered steps (CSS counter) plus an optional marquee of technologies. */
+export const BlockProcess = forwardRef<HTMLElement, BlockProcessProps>(function BlockProcess(
+  { eyebrow, title, steps, marquee, marqueeLabel = "Technologies", className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <ol className="oc-steps">
+          {steps.map((s, i) => (
+            <li key={i}>
+              <h3>{s.title}</h3>
+              {s.text != null && <p>{s.text}</p>}
+            </li>
+          ))}
+        </ol>
+        {marquee && marquee.length > 0 && (
+          <div className="oc-marquee mt-4" aria-label={marqueeLabel}>
+            <div className="oc-marquee__track">
+              {marquee.map((m) => <span className="oc-marquee__item" key={m}>{m}</span>)}
+              {marquee.map((m) => <span className="oc-marquee__item" aria-hidden="true" key={`dup-${m}`}>{m}</span>)}
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+});
+

package/src/blocks/BlockProductGrid.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface Product {
+  href: string;
+  /** Accent name (`green`, `orange`, `violet`, `cyan`, ...), applied as `oc-accent--{accent}`. */
+  accent?: string;
+  /** Glyph or inline SVG in the icon tile. */
+  icon?: ReactNode;
+  /** Pill label (`Own product`, `Tool`...). */
+  pill?: ReactNode;
+  name: ReactNode;
+  tagline?: ReactNode;
+  summary?: ReactNode;
+  /** "Discover ..." link text. */
+  more?: ReactNode;
+}
+
+export interface BlockProductGridProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  products: Product[];
+}
+
+/** Section title plus a grid of accent-colored product cards. */
+export const BlockProductGrid = forwardRef<HTMLElement, BlockProductGridProps>(function BlockProductGrid(
+  { eyebrow, title, products, className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <div className="oc-card-grid">
+          {products.map((p, i) => (
+            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`)} href={p.href} key={i}>
+              <div className="oc-product-card__top">
+                {p.icon != null && <span className="oc-icon-tile" aria-hidden="true">{p.icon}</span>}
+                {p.pill != null && <span className="oc-pill">{p.pill}</span>}
+              </div>
+              <h3 className="oc-product-card__name">{p.name}</h3>
+              {p.tagline != null && <p className="oc-product-card__tagline">{p.tagline}</p>}
+              {p.summary != null && <p className="oc-product-card__summary">{p.summary}</p>}
+              {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});

package/src/blocks/BlockProfileHeader.tsx

@@ -0,0 +1,57 @@
+// File: packages/react/src/blocks/BlockProfileHeader.tsx | Map: types -> BlockProfileHeader (banner -> bar (avatar, info, actions) -> tabs)
+import { forwardRef, useId } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ProfileHeaderTab {
+  label: ReactNode;
+  href: string;
+  current?: boolean;
+}
+
+export interface BlockProfileHeaderProps extends HTMLAttributes<HTMLElement> {
+  name: ReactNode;
+  meta?: ReactNode;
+  bio?: ReactNode;
+  /** Initials, or an <img> for the avatar. */
+  avatar: ReactNode;
+  /** Banner image URL; without it the banner is an accent gradient. */
+  banner?: string;
+  actions?: ReactNode;
+  tabs?: ProfileHeaderTab[];
+  tabsLabel?: string;
+  compact?: boolean;
+  /** Heading level of the name (h1 on a profile page, h2 inside a page). */
+  headingLevel?: 1 | 2;
+}
+
+/** `.oc-block-profile`: banner, overhanging avatar, name, meta, actions and link tabs. */
+export const BlockProfileHeader = forwardRef<HTMLElement, BlockProfileHeaderProps>(function BlockProfileHeader(
+  { name, meta, bio, avatar, banner, actions, tabs = [], tabsLabel = "Profile sections", compact = false, headingLevel = 1, className, ...rest },
+  ref,
+) {
+  const nameId = `oc-profile-name-${useId().replace(/[^\w-]/g, "")}`;
+  const Heading = headingLevel === 1 ? "h1" : "h2";
+  const bannerStyle = banner ? ({ "--oc-profile-banner": `url("${banner}")` } as CSSProperties) : undefined;
+  return (
+    <section ref={ref} className={cx("oc-block-profile", compact && "oc-block-profile--compact", className)} aria-labelledby={nameId} {...rest}>
+      <div className="oc-block-profile-banner" style={bannerStyle} aria-hidden="true" />
+      <div className="oc-block-profile-bar">
+        <span className="oc-avatar oc-block-profile-avatar" aria-hidden="true">{avatar}</span>
+        <div className="oc-block-profile-info">
+          <Heading className="oc-block-profile-name" id={nameId}>{name}</Heading>
+          {meta != null && <p className="oc-block-profile-meta">{meta}</p>}
+          {bio != null && <p className="oc-block-profile-bio">{bio}</p>}
+        </div>
+        {actions != null && <div className="oc-block-profile-actions">{actions}</div>}
+      </div>
+      {tabs.length > 0 && (
+        <nav className="oc-block-profile-tabs" aria-label={tabsLabel}>
+          {tabs.map((tab, i) => (
+            <a key={i} className="oc-block-profile-tab" href={tab.href} aria-current={tab.current ? "page" : undefined}>{tab.label}</a>
+          ))}
+        </nav>
+      )}
+    </section>
+  );
+});

package/src/blocks/BlockShowcase.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface ShowcaseProject {
+  href: string;
+  accent?: string;
+  /** CSS `background` of the browser frame body (e.g. a gradient of palette variables) or an image URL via `image`. */
+  background?: string;
+  image?: string;
+  imageAlt?: string;
+  pill?: ReactNode;
+  name: ReactNode;
+  summary?: ReactNode;
+  more?: ReactNode;
+}
+
+export interface BlockShowcaseProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  eyebrow?: ReactNode;
+  /** Display title; wrap a word in `<span className="oc-text-gradient">`. */
+  title: ReactNode;
+  projects: ShowcaseProject[];
+  /** Minimum card width (`--oc-card-min`, default 26rem). */
+  cardMin?: string;
+}
+
+/** Portfolio grid: project cards with a browser frame around the screenshot. */
+export const BlockShowcase = forwardRef<HTMLElement, BlockShowcaseProps>(function BlockShowcase(
+  { eyebrow, title, projects, cardMin = "26rem", className, ...rest },
+  ref,
+) {
+  return (
+    <section ref={ref} className={cx("oc-section-pad", className)} {...rest}>
+      <div className="oc-container">
+        {eyebrow != null && <p className="oc-eyebrow">{eyebrow}</p>}
+        <h2 className="oc-display oc-display--md">{title}</h2>
+        <div className="oc-card-grid" style={{ "--oc-card-min": cardMin } as CSSProperties}>
+          {projects.map((p, i) => (
+            <a className={cx("oc-product-card", p.accent && `oc-accent--${p.accent}`, "p-0 overflow-hidden")} href={p.href} key={i}>
+              <span className="oc-browser-frame m-1">
+                <span className="oc-browser-frame__bar"><i /><i /><i /></span>
+                <span className="oc-browser-frame__body" style={p.background ? { background: p.background } : undefined}>
+                  {p.image && <img src={p.image} alt={p.imageAlt ?? ""} />}
+                </span>
+              </span>
+              <span className="grid gap-0.5 p-1.5 pt-0">
+                {p.pill != null && <span className="oc-pill oc-pill--accent">{p.pill}</span>}
+                <span className="oc-product-card__name">{p.name}</span>
+                {p.summary != null && <span className="oc-product-card__summary">{p.summary}</span>}
+                {p.more != null && <span className="oc-product-card__more">{p.more}</span>}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+});