@deckspec/theme-noir-display 0.1.0

package/patterns/comparison-columns/index.tsx

@@ -0,0 +1,115 @@
+import { z } from "zod";
+
+const columnSchema = z.object({
+  name: z.string().min(1).describe("Column header"),
+  items: z.array(z.string().min(1)).min(1).max(6).describe("Feature items"),
+  highlighted: z.boolean().optional().describe("Highlight this column"),
+});
+
+export const schema = z.object({
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  columns: z.array(columnSchema).min(2).max(3).describe("Comparison columns"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ComparisonColumns({ heading, columns }: Props) {
+  return (
+    <div className="slide-stack" style={{ justifyContent: "center", gap: 44 }}>
+      <h2
+        style={{
+          fontSize: 48,
+          fontWeight: 600,
+          lineHeight: 1.08,
+          letterSpacing: "-0.003em",
+          textAlign: "center",
+        }}
+      >
+        {heading}
+      </h2>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${columns.length}, 1fr)`,
+          gap: 20,
+        }}
+      >
+        {columns.map((col, ci) => (
+          <div
+            key={ci}
+            style={{
+              backgroundColor: "#ffffff",
+              borderRadius: 18,
+              border: col.highlighted
+                ? "1.5px solid var(--color-primary)"
+                : "none",
+              padding: "36px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 24,
+              boxShadow: col.highlighted
+                ? "0 2px 12px rgba(0,113,227,0.08)"
+                : "4px 4px 12px rgba(0,0,0,0.06)",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+              <span
+                style={{
+                  fontSize: 24,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                  letterSpacing: "0.009em",
+                  color: "var(--color-foreground)",
+                }}
+              >
+                {col.name}
+              </span>
+              {col.highlighted && (
+                <span
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    padding: "3px 10px",
+                    borderRadius: 980,
+                    backgroundColor: "var(--color-primary)",
+                    color: "#fff",
+                  }}
+                >
+                  Recommended
+                </span>
+              )}
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+              {col.items.map((item, ii) => (
+                <div key={ii} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
+                    <path
+                      d="M3 8.5L6.5 12L13 4"
+                      stroke={col.highlighted ? "var(--color-primary)" : "var(--color-muted-foreground)"}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  <span
+                    style={{
+                      fontSize: 17,
+                      fontWeight: 400,
+                      letterSpacing: "-0.022em",
+                      color: "var(--color-foreground)",
+                      lineHeight: 1.47,
+                    }}
+                  >
+                    {item}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/feature-metrics/index.tsx

@@ -0,0 +1,94 @@
+import { z } from "zod";
+
+const metricSchema = z.object({
+  label: z.string().min(1).describe("Metric label"),
+  value: z.string().min(1).describe("Display value"),
+});
+
+export const schema = z.object({
+  headline: z.string().min(1).max(60).describe("Section heading"),
+  description: z.string().max(200).optional().describe("Optional body text"),
+  metrics: z.array(metricSchema).min(2).max(4).describe("Key metrics"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function FeatureMetrics({ headline, description, metrics }: Props) {
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 48,
+        background: "#ffffff",
+        padding: "40px 80px 60px",
+      }}
+    >
+      <div style={{ textAlign: "center", marginBottom: 16 }}>
+        <h2
+          style={{
+            fontSize: 48,
+            fontWeight: 600,
+            lineHeight: 1.08,
+            letterSpacing: "-0.003em",
+          }}
+        >
+          {headline}
+        </h2>
+        {description && (
+          <p
+            style={{
+              fontSize: 21,
+              fontWeight: 400,
+              lineHeight: 1.38,
+              color: "var(--color-muted-foreground)",
+              marginTop: 12,
+            }}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+
+      <div style={{ display: "flex", justifyContent: "center", gap: 64 }}>
+        {metrics.map((m, i) => (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 8,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 56,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                lineHeight: 1,
+                letterSpacing: "-0.015em",
+                color: "var(--color-foreground)",
+              }}
+            >
+              {m.value}
+            </span>
+            <span
+              style={{
+                fontSize: 17,
+                fontWeight: 400,
+                letterSpacing: "-0.022em",
+                color: "var(--color-muted-foreground)",
+              }}
+            >
+              {m.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/flow-diagram/index.tsx

@@ -0,0 +1,151 @@
+import { z } from "zod";
+
+const stepSchema = z.object({
+  title: z.string().min(1).describe("Step title"),
+  description: z.string().optional().describe("Step description"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Diagram heading"),
+  steps: z.array(stepSchema).min(3).max(5).describe("Flow steps"),
+});
+
+type Props = z.infer<typeof schema>;
+
+function Arrow() {
+  return (
+    <svg width={32} height={32} viewBox="0 0 32 32" fill="none" style={{ flexShrink: 0 }}>
+      <path
+        d="M8 16H24M24 16L18 10M24 16L18 22"
+        stroke="#0071e3"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default function FlowDiagram({ label, heading, steps }: Props) {
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 48,
+        background: "#ffffff",
+        padding: "48px 60px",
+      }}
+    >
+      {/* Header */}
+      <div style={{ textAlign: "center" }}>
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+              display: "block",
+              marginBottom: 8,
+            }}
+          >
+            {label}
+          </span>
+        )}
+        <h2
+          style={{
+            fontSize: 44,
+            fontWeight: 600,
+            lineHeight: 1.08,
+            letterSpacing: "-0.003em",
+          }}
+        >
+          {heading}
+        </h2>
+      </div>
+
+      {/* Flow */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          width: "100%",
+          justifyContent: "center",
+        }}
+      >
+        {steps.map((step, i) => (
+          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            {/* Step card */}
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center",
+                gap: 12,
+                padding: "28px 20px",
+                backgroundColor: "#f5f5f7",
+                borderRadius: 16,
+                minWidth: 160,
+                maxWidth: 200,
+              }}
+            >
+              {/* Step number */}
+              <div
+                style={{
+                  width: 36,
+                  height: 36,
+                  borderRadius: "50%",
+                  backgroundColor: i === 0 ? "#0071e3" : "#1d1d1f",
+                  color: "#fff",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: 15,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                }}
+              >
+                {i + 1}
+              </div>
+              <span
+                style={{
+                  fontSize: 17,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                  letterSpacing: "-0.022em",
+                  color: "#1d1d1f",
+                  lineHeight: 1.3,
+                }}
+              >
+                {step.title}
+              </span>
+              {step.description && (
+                <span
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 400,
+                    letterSpacing: "-0.016em",
+                    color: "#6e6e73",
+                    lineHeight: 1.38,
+                  }}
+                >
+                  {step.description}
+                </span>
+              )}
+            </div>
+
+            {/* Arrow between steps */}
+            {i < steps.length - 1 && <Arrow />}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/hero-statement/index.tsx

@@ -0,0 +1,72 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  eyebrow: z.string().min(1).max(30).describe("Small accent label above headline"),
+  headline: z.string().min(1).max(60).describe("Massive display headline (supports \\n)"),
+  body: z.string().min(1).max(200).describe("Supporting body text"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function HeroStatement({ eyebrow, headline, body }: Props) {
+  const lines = headline.split("\\n");
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#ffffff",
+      }}
+    >
+      <div
+        className="stack-center"
+        style={{ gap: 20, maxWidth: 900, padding: "0 80px", marginBottom: 32 }}
+      >
+        <span
+          style={{
+            fontSize: 17,
+            fontWeight: 600,
+            letterSpacing: "-0.022em",
+            color: "var(--color-primary)",
+          }}
+        >
+          {eyebrow}
+        </span>
+
+        <h1
+          style={{
+            fontSize: 80,
+            fontWeight: 600,
+            lineHeight: 1.05,
+            letterSpacing: "-0.015em",
+            textAlign: "center",
+          }}
+        >
+          {lines.map((line, i) => (
+            <span key={i}>
+              {i > 0 && <br />}
+              {line}
+            </span>
+          ))}
+        </h1>
+
+        <p
+          style={{
+            fontSize: 21,
+            fontWeight: 400,
+            lineHeight: 1.38,
+            letterSpacing: "0.011em",
+            color: "var(--color-muted-foreground)",
+            maxWidth: 700,
+            textAlign: "center",
+          }}
+        >
+          {body}
+        </p>
+      </div>
+    </div>
+  );
+}

package/patterns/icon-grid/index.tsx

@@ -0,0 +1,126 @@
+import { z } from "zod";
+import { Icon } from "../_lib/icon.js";
+
+const itemSchema = z.object({
+  icon: z.string().min(1).describe("Icon name (lucide)"),
+  title: z.string().min(1).describe("Feature title"),
+  description: z.string().optional().describe("Short description"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  items: z.array(itemSchema).min(3).max(6).describe("Icon feature items"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function IconGrid({ label, heading, items }: Props) {
+  const cols = items.length <= 3 ? items.length : items.length <= 4 ? 2 : 3;
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 40,
+        background: "#ffffff",
+        padding: "48px 80px",
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+              display: "block",
+              marginBottom: 8,
+            }}
+          >
+            {label}
+          </span>
+        )}
+        <h2
+          style={{
+            fontSize: 44,
+            fontWeight: 600,
+            lineHeight: 1.08,
+            letterSpacing: "-0.003em",
+          }}
+        >
+          {heading}
+        </h2>
+      </div>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: 24,
+          width: "100%",
+          maxWidth: 900,
+        }}
+      >
+        {items.map((item, i) => (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              textAlign: "center",
+              gap: 12,
+              padding: "24px 16px",
+            }}
+          >
+            <div
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: 12,
+                backgroundColor: "#f5f5f7",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--color-primary)",
+              }}
+            >
+              <Icon name={item.icon} size={24} />
+            </div>
+            <span
+              style={{
+                fontSize: 17,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.022em",
+                color: "var(--color-foreground)",
+                lineHeight: 1.3,
+              }}
+            >
+              {item.title}
+            </span>
+            {item.description && (
+              <span
+                style={{
+                  fontSize: 14,
+                  fontWeight: 400,
+                  letterSpacing: "-0.016em",
+                  color: "var(--color-muted-foreground)",
+                  lineHeight: 1.43,
+                }}
+              >
+                {item.description}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/index.ts

@@ -0,0 +1,17 @@
+export { default as TitleCenter, schema as titleCenterSchema } from "./title-center/index.js";
+export { default as HeroStatement, schema as heroStatementSchema } from "./hero-statement/index.js";
+export { default as FeatureMetrics, schema as featureMetricsSchema } from "./feature-metrics/index.js";
+export { default as BulletList, schema as bulletListSchema } from "./bullet-list/index.js";
+export { default as ThreePillars, schema as threePillarsSchema } from "./three-pillars/index.js";
+export { default as BigNumber, schema as bigNumberSchema } from "./big-number/index.js";
+export { default as ComparisonColumns, schema as comparisonColumnsSchema } from "./comparison-columns/index.js";
+export { default as PricingTiers, schema as pricingTiersSchema } from "./pricing-tiers/index.js";
+export { default as ThankYou, schema as thankYouSchema } from "./thank-you/index.js";
+export { default as IconGrid, schema as iconGridSchema } from "./icon-grid/index.js";
+export { default as ChartBar, schema as chartBarSchema } from "./chart-bar/index.js";
+export { default as FlowDiagram, schema as flowDiagramSchema } from "./flow-diagram/index.js";
+export { default as PhotoSplit, schema as photoSplitSchema } from "./photo-split/index.js";
+export { default as ChallengeCards, schema as challengeCardsSchema } from "./challenge-cards/index.js";
+export { default as PhasedRoadmap, schema as phasedRoadmapSchema } from "./phased-roadmap/index.js";
+export { default as ShowcaseGrid, schema as showcaseGridSchema } from "./showcase-grid/index.js";
+export { default as BodyMessage, schema as bodyMessageSchema } from "./body-message/index.js";