@deckspec/theme-noir-display 0.1.0

package/patterns/phased-roadmap/index.tsx

@@ -0,0 +1,179 @@
+import { z } from "zod";
+import { SlideHeader } from "../../components/index.js";
+
+const phaseSchema = z.object({
+  name: z.string().min(1).max(15).describe("Phase label e.g. Phase1"),
+  title: z.string().min(1).max(30).describe("Phase title"),
+  items: z.array(z.string()).min(2).max(5).describe("Phase action items"),
+});
+
+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"),
+  banner: z.string().min(1).max(60).optional().describe("Cross-phase goal text"),
+  phases: z.array(phaseSchema).min(2).max(4).describe("Roadmap phases (2-4)"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function PhasedRoadmap({ label, heading, banner, phases }: Props) {
+  const count = phases.length;
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--color-card-background)",
+        padding: "48px 60px",
+        gap: 24,
+      }}
+    >
+      {/* Header */}
+      <SlideHeader label={label} heading={heading} />
+
+      {/* Phase chevrons */}
+      <div style={{ display: "flex", gap: 8, alignItems: "stretch" }}>
+        {phases.map((phase, i) => (
+          <div
+            key={i}
+            style={{
+              flex: 1,
+              position: "relative",
+              backgroundColor: i === 0 ? "var(--color-primary)" : "var(--color-muted)",
+              clipPath:
+                i < count - 1
+                  ? "polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%)"
+                  : "polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%)",
+              padding: i === 0 ? "14px 24px 14px 16px" : "14px 24px 14px 28px",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              gap: 2,
+              minHeight: 56,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "0.04em",
+                textTransform: "uppercase" as const,
+                color: i === 0 ? "#ffffff" : "var(--color-primary)",
+                lineHeight: 1,
+              }}
+            >
+              {phase.name}
+            </span>
+            <span
+              style={{
+                fontSize: 15,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.022em",
+                color: i === 0 ? "#ffffff" : "var(--color-foreground)",
+                lineHeight: 1.2,
+              }}
+            >
+              {phase.title}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Banner */}
+      {banner && (
+        <div
+          style={{
+            backgroundColor: "var(--color-muted)",
+            borderRadius: 8,
+            padding: "10px 24px",
+            textAlign: "center",
+          }}
+        >
+          <span
+            style={{
+              fontSize: 14,
+              fontWeight: 600,
+              fontFamily: "var(--font-heading)",
+              letterSpacing: "-0.016em",
+              color: "var(--color-foreground)",
+            }}
+          >
+            {banner}
+          </span>
+        </div>
+      )}
+
+      {/* Detail cards */}
+      <div style={{ display: "flex", gap: 16, flex: 1 }}>
+        {phases.map((phase, i) => (
+          <div
+            key={i}
+            style={{
+              flex: 1,
+              backgroundColor: "var(--color-background)",
+              borderRadius: 12,
+              padding: "20px 20px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.016em",
+                color: "var(--color-primary)",
+              }}
+            >
+              {phase.name}
+            </span>
+            <ul
+              style={{
+                listStyle: "none",
+                margin: 0,
+                padding: 0,
+                display: "flex",
+                flexDirection: "column",
+                gap: 6,
+              }}
+            >
+              {phase.items.map((item, j) => (
+                <li
+                  key={j}
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 400,
+                    fontFamily: "var(--font-body)",
+                    letterSpacing: "-0.016em",
+                    lineHeight: 1.43,
+                    color: "var(--color-foreground)",
+                    paddingLeft: 14,
+                    position: "relative",
+                  }}
+                >
+                  <span
+                    style={{
+                      position: "absolute",
+                      left: 0,
+                      top: 0,
+                      color: "var(--color-muted-foreground)",
+                    }}
+                  >
+                    &#x2022;
+                  </span>
+                  {item}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/photo-split/index.tsx

@@ -0,0 +1,110 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Heading"),
+  body: z.string().min(1).max(300).describe("Body text"),
+  image: z.string().min(1).describe("Image path or URL"),
+  imagePosition: z.enum(["left", "right"]).optional().describe("Image position (default: right)"),
+});
+
+export const assets = [{ field: "image", type: "image" as const }];
+
+type Props = z.infer<typeof schema>;
+
+export default function PhotoSplit({ label, heading, body, image, imagePosition }: Props) {
+  const imgRight = imagePosition !== "left";
+
+  const textBlock = (
+    <div
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        padding: "60px 56px",
+        gap: 16,
+      }}
+    >
+      {label && (
+        <span
+          style={{
+            fontSize: 17,
+            fontWeight: 600,
+            letterSpacing: "-0.022em",
+            color: "var(--color-primary)",
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <h2
+        style={{
+          fontSize: 36,
+          fontWeight: 600,
+          lineHeight: 1.11,
+          letterSpacing: "-0.009em",
+        }}
+      >
+        {heading}
+      </h2>
+      <p
+        style={{
+          fontSize: 17,
+          fontWeight: 400,
+          lineHeight: 1.47,
+          letterSpacing: "-0.022em",
+          color: "var(--color-muted-foreground)",
+        }}
+      >
+        {body}
+      </p>
+    </div>
+  );
+
+  const imageBlock = (
+    <div
+      style={{
+        width: "50%",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#e8e8ed",
+      }}
+    >
+      <img
+        src={image}
+        alt=""
+        style={{
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        background: "#ffffff",
+        overflow: "hidden",
+      }}
+    >
+      {imgRight ? (
+        <>
+          {textBlock}
+          {imageBlock}
+        </>
+      ) : (
+        <>
+          {imageBlock}
+          {textBlock}
+        </>
+      )}
+    </div>
+  );
+}

package/patterns/pricing-tiers/index.tsx

@@ -0,0 +1,127 @@
+import { z } from "zod";
+
+const planSchema = z.object({
+  name: z.string().min(1).describe("Plan name"),
+  price: z.string().min(1).describe("Price display"),
+  description: z.string().optional().describe("Plan description"),
+  features: z.array(z.string().min(1)).min(1).max(6).describe("Feature list"),
+  highlighted: z.boolean().optional().describe("Highlight this plan"),
+});
+
+export const schema = z.object({
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  plans: z.array(planSchema).min(2).max(3).describe("Pricing plans"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function PricingTiers({ heading, plans }: Props) {
+  return (
+    <div className="slide-stack" style={{ justifyContent: "center", gap: 40 }}>
+      <h2
+        style={{
+          fontSize: 48,
+          fontWeight: 600,
+          lineHeight: 1.08,
+          letterSpacing: "-0.003em",
+          textAlign: "center",
+        }}
+      >
+        {heading}
+      </h2>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${plans.length}, 1fr)`,
+          gap: 20,
+        }}
+      >
+        {plans.map((plan, i) => (
+          <div
+            key={i}
+            style={{
+              backgroundColor: "#ffffff",
+              borderRadius: 18,
+              border: plan.highlighted ? "1.5px solid var(--color-primary)" : "none",
+              padding: "36px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 20,
+              boxShadow: plan.highlighted
+                ? "0 2px 12px rgba(0,113,227,0.08)"
+                : "4px 4px 12px rgba(0,0,0,0.06)",
+            }}
+          >
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 600,
+                letterSpacing: "-0.016em",
+                color: plan.highlighted ? "var(--color-primary)" : "var(--color-muted-foreground)",
+              }}
+            >
+              {plan.name}
+            </span>
+
+            <span
+              style={{
+                fontSize: 40,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                lineHeight: 1,
+                letterSpacing: "-0.009em",
+                color: "var(--color-foreground)",
+              }}
+            >
+              {plan.price}
+            </span>
+
+            {plan.description && (
+              <span
+                style={{
+                  fontSize: 14,
+                  fontWeight: 400,
+                  letterSpacing: "-0.016em",
+                  color: "var(--color-muted-foreground)",
+                  lineHeight: 1.43,
+                }}
+              >
+                {plan.description}
+              </span>
+            )}
+
+            <div style={{ height: 1, backgroundColor: "rgba(0,0,0,0.08)" }} />
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              {plan.features.map((feat, fi) => (
+                <div key={fi} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                  <svg width={14} height={14} viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0 }}>
+                    <path
+                      d="M3 8.5L6.5 12L13 4"
+                      stroke={plan.highlighted ? "var(--color-primary)" : "var(--color-muted-foreground)"}
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                  <span
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 400,
+                      letterSpacing: "-0.016em",
+                      color: "var(--color-foreground)",
+                      lineHeight: 1.43,
+                    }}
+                  >
+                    {feat}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/showcase-grid/index.tsx

@@ -0,0 +1,99 @@
+import { z } from "zod";
+import { Icon } from "../_lib/icon.js";
+import { SlideHeader } from "../../components/index.js";
+
+const itemSchema = z.object({
+  category: z.string().min(1).max(15).describe("Category label"),
+  icon: z.string().min(1).describe("Lucide icon name"),
+  title: z.string().min(1).max(40).describe("Item title"),
+});
+
+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(4).max(8).describe("Grid items (4-8)"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ShowcaseGrid({ label, heading, items }: Props) {
+  const cols = items.length <= 4 ? items.length : 4;
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 40,
+        background: "var(--color-card-background)",
+        padding: "48px 80px",
+      }}
+    >
+      {/* Header */}
+      <div style={{ textAlign: "center" }}>
+        <SlideHeader label={label} heading={heading} />
+      </div>
+
+      {/* Grid */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: 24,
+          width: "100%",
+          maxWidth: 1040,
+        }}
+      >
+        {items.map((item, i) => (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              textAlign: "center",
+              gap: 10,
+              padding: "20px 12px",
+            }}
+          >
+            {/* Category label */}
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.016em",
+                color: "var(--color-primary)",
+                lineHeight: 1,
+              }}
+            >
+              {item.category}
+            </span>
+
+            {/* Icon */}
+            <div style={{ color: "var(--color-foreground)" }}>
+              <Icon name={item.icon} size={40} />
+            </div>
+
+            {/* Title */}
+            <span
+              style={{
+                fontSize: 17,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.022em",
+                color: "var(--color-foreground)",
+                lineHeight: 1.3,
+              }}
+            >
+              {item.title}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/thank-you/index.tsx

@@ -0,0 +1,86 @@
+import { z } from "zod";
+
+export const schema = z.object({
+  headline: z.string().min(1).max(40).describe("Closing headline"),
+  body: z.string().max(200).optional().describe("Closing body text"),
+  cta: z.string().max(40).optional().describe("Call-to-action text (pill button)"),
+  link: z.string().max(80).optional().describe("URL or contact info beneath CTA"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ThankYou({ headline, body, cta, link }: Props) {
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "#ffffff",
+      }}
+    >
+      <div className="stack-center" style={{ gap: 24, maxWidth: 800, marginBottom: 48 }}>
+        <h1
+          style={{
+            fontSize: 72,
+            fontWeight: 600,
+            lineHeight: 1.05,
+            letterSpacing: "-0.015em",
+          }}
+        >
+          {headline}
+        </h1>
+
+        {body && (
+          <p
+            style={{
+              fontSize: 21,
+              fontWeight: 400,
+              lineHeight: 1.38,
+              letterSpacing: "0.011em",
+              color: "var(--color-muted-foreground)",
+              maxWidth: 600,
+              textAlign: "center",
+            }}
+          >
+            {body}
+          </p>
+        )}
+
+        {cta && (
+          <div style={{ marginTop: 8 }}>
+            <span
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                padding: "12px 28px",
+                borderRadius: 980,
+                backgroundColor: "var(--color-primary)",
+                color: "#fff",
+                fontSize: 17,
+                fontWeight: 600,
+                letterSpacing: "-0.022em",
+              }}
+            >
+              {cta}
+            </span>
+          </div>
+        )}
+
+        {link && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 400,
+              letterSpacing: "-0.022em",
+              color: "var(--color-accent)",
+            }}
+          >
+            {link}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}