@jimmy_harika/websitekit 0.3.1

package/src/blocks/pricing.tsx

@@ -0,0 +1,120 @@
+/**
+ * Pricing — package cards (photographer packages, speaking fees, etc.). Items
+ * come from a `list` field: `name | price | cadence | features ; ctaLabel |
+ * ctaHref` per line (features ;-separated; cadence optional e.g. "/mo").
+ * Portable, RSC-safe, edit-aware. The highlighted card reads ACCENT.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { ACCENT, BODY, HAIRLINE, HEADING, MUTED, RADIUS, Section, TEXT, TINT } from "./primitives";
+
+export interface PricingProps {
+  heading?: string;
+  /** `name | price | cadence | f1; f2; f3 | ctaLabel | ctaHref` per line. */
+  plans?: string;
+  /** 1-based index of the plan to highlight (ACCENT), or blank for none. */
+  highlight?: string;
+  edit?: EditPrimitives;
+}
+
+interface Plan {
+  name: string;
+  price: string;
+  cadence?: string;
+  features: string[];
+  ctaLabel?: string;
+  ctaHref?: string;
+}
+
+function parsePlans(raw?: string): Plan[] {
+  if (!raw) return [];
+  return raw
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((l) => {
+      const p = l.split("|").map((s) => (s ?? "").trim());
+      return {
+        name: p[0] || "Plan",
+        price: p[1] || "",
+        cadence: p[2] || undefined,
+        features: (p[3] ?? "").split(";").map((f) => f.trim()).filter(Boolean),
+        ctaLabel: p[4] || undefined,
+        ctaHref: p[5] || undefined,
+      };
+    });
+}
+
+export function Pricing(props: PricingProps) {
+  const { heading, plans, highlight, edit } = props;
+  const items = parsePlans(plans);
+  const hi = highlight ? Number(highlight) - 1 : -1;
+
+  return (
+    <Section>
+      {heading &&
+        renderText(edit, {
+          field: "heading",
+          value: heading,
+          as: "h2",
+          placeholder: "Plans & pricing",
+          className: "mb-10 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light",
+          style: { fontFamily: HEADING, color: TEXT },
+        })}
+      <div className="grid gap-5 md:grid-cols-3">
+        {items.map((p, i) => {
+          const hot = i === hi;
+          return (
+            <div
+              key={i}
+              className="flex flex-col p-7"
+              style={{
+                borderRadius: RADIUS,
+                border: `1px solid ${hot ? ACCENT : HAIRLINE}`,
+                background: hot ? TINT : "transparent",
+              }}
+            >
+              <h3 className="text-sm font-semibold uppercase tracking-wide" style={{ fontFamily: BODY, color: MUTED }}>
+                {p.name}
+              </h3>
+              <div className="mt-3 flex items-baseline gap-1">
+                <span className="text-[clamp(1.8rem,4vw,2.6rem)] font-light" style={{ fontFamily: HEADING, color: TEXT }}>
+                  {p.price}
+                </span>
+                {p.cadence && (
+                  <span className="text-sm" style={{ fontFamily: BODY, color: MUTED }}>
+                    {p.cadence}
+                  </span>
+                )}
+              </div>
+              <ul className="mt-5 flex-1 space-y-2 text-[14px]" style={{ fontFamily: BODY, color: TEXT }}>
+                {p.features.map((f, j) => (
+                  <li key={j} className="flex gap-2">
+                    <span style={{ color: ACCENT }}>·</span>
+                    <span>{f}</span>
+                  </li>
+                ))}
+              </ul>
+              {p.ctaLabel && p.ctaHref && (
+                <a
+                  href={p.ctaHref}
+                  target={p.ctaHref.startsWith("http") ? "_blank" : undefined}
+                  rel={p.ctaHref.startsWith("http") ? "noopener noreferrer" : undefined}
+                  className="mt-6 inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-medium transition-opacity hover:opacity-80"
+                  style={{
+                    background: hot ? ACCENT : "transparent",
+                    color: hot ? "var(--pb-color-bg, #fff)" : ACCENT,
+                    border: hot ? "none" : `1px solid ${ACCENT}`,
+                    borderRadius: RADIUS,
+                    fontFamily: BODY,
+                  }}
+                >
+                  {p.ctaLabel}
+                </a>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}

package/src/blocks/primitives.tsx

@@ -0,0 +1,109 @@
+/**
+ * Shared block primitives — design-system-agnostic. These read ONLY the
+ * engine's `--pb-*` theme tokens (emitted by `themeVars`) and Tailwind utility
+ * classes, with NO app-UI imports. That is what makes a block built here render
+ * correctly on EVERY consuming app's site (the load-bearing decision of the
+ * shared-package effort). Blocks are pure/SSR-safe and edit-aware via the
+ * engine's `renderText`/`renderImage` bridge.
+ */
+import { type CSSProperties, type ReactNode } from "react";
+
+/* ── Theme token shorthands (with sane fallbacks for un-themed previews) ─────── */
+export const HEADING = "var(--pb-font-heading, ui-serif, Georgia, 'Times New Roman', serif)";
+export const BODY = "var(--pb-font-body, ui-sans-serif, system-ui, sans-serif)";
+export const ACCENT = "var(--pb-color-accent, currentColor)";
+export const TEXT = "var(--pb-color-text, #1a1a1a)";
+export const MUTED = "var(--pb-color-muted, #6b7280)";
+export const BG = "var(--pb-color-bg, #ffffff)";
+export const RADIUS = "var(--pb-radius, 4px)";
+
+/** A faint tint of the text color — for alternating section backgrounds. */
+export const TINT = "color-mix(in srgb, var(--pb-color-text, #1a1a1a) 4%, transparent)";
+/** A hairline border that adapts to the theme. */
+export const HAIRLINE = "color-mix(in srgb, var(--pb-color-text, #1a1a1a) 12%, transparent)";
+
+/** One book, as a block sees it — purely presentational. The app resolves live
+ *  data (e.g. an author's real books) into this shape before render. */
+export interface BookItem {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  coverUrl?: string;
+  description?: string;
+  links?: { label: string; url: string }[];
+}
+
+/** Section shell: theme-scaled vertical rhythm + centered max-width container. */
+export function Section({
+  children,
+  style,
+  className = "",
+  narrow = false,
+  tint = false,
+}: {
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+  narrow?: boolean;
+  tint?: boolean;
+}) {
+  return (
+    <section
+      style={{
+        paddingBlock: "calc(var(--pb-spacing, 1) * 4.5rem)",
+        ...(tint ? { backgroundColor: TINT } : {}),
+        ...style,
+      }}
+      className={`w-full px-6 sm:px-10 ${className}`}
+    >
+      <div className={`mx-auto ${narrow ? "max-w-3xl" : "max-w-6xl"}`}>{children}</div>
+    </section>
+  );
+}
+
+/** Small-caps eyebrow above a heading. */
+export function Eyebrow({ children }: { children?: ReactNode }) {
+  if (!children) return null;
+  return (
+    <p
+      className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em]"
+      style={{ color: ACCENT, fontFamily: BODY }}
+    >
+      {children}
+    </p>
+  );
+}
+
+/** Pill / link button in the theme accent — used for book buy links + CTAs. */
+export function AccentLink({
+  href,
+  children,
+  solid = true,
+}: {
+  href: string;
+  children: ReactNode;
+  solid?: boolean;
+}) {
+  const base =
+    "inline-flex items-center justify-center px-5 py-2.5 text-[13px] font-medium tracking-wide transition-opacity hover:opacity-80";
+  return (
+    <a
+      href={href || "#"}
+      target={href?.startsWith("http") ? "_blank" : undefined}
+      rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
+      className={base}
+      style={
+        solid
+          ? { background: ACCENT, color: BG, borderRadius: RADIUS, fontFamily: BODY }
+          : {
+              border: `1px solid ${ACCENT}`,
+              color: ACCENT,
+              borderRadius: RADIUS,
+              fontFamily: BODY,
+            }
+      }
+    >
+      {children}
+    </a>
+  );
+}

package/src/blocks/testimonials.tsx

@@ -0,0 +1,89 @@
+/**
+ * Testimonials — social proof. Items from a `list` field:
+ * `quote | author | role` per line. Variants: single (the first, large) or grid.
+ * Portable, RSC-safe, edit-aware. Portrait images optional (append ` | url`).
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { BODY, HEADING, MUTED, RADIUS, Section, TEXT, TINT } from "./primitives";
+
+export interface TestimonialsProps {
+  heading?: string;
+  /** `quote | author | role` per line (role + portrait url optional). */
+  items?: string;
+  layout?: "single" | "grid";
+  edit?: EditPrimitives;
+}
+
+interface Quote {
+  quote: string;
+  author: string;
+  role?: string;
+  portrait?: string;
+}
+
+function parseItems(raw?: string): Quote[] {
+  if (!raw) return [];
+  return raw
+    .split("\n")
+    .map((l) => l.trim())
+    .filter(Boolean)
+    .map((l) => {
+      const p = l.split("|").map((s) => (s ?? "").trim());
+      return { quote: p[0] || "", author: p[1] || "—", role: p[2] || undefined, portrait: p[3] || undefined };
+    })
+    .filter((q) => q.quote);
+}
+
+export function Testimonials(props: TestimonialsProps) {
+  const { heading, items, layout = "grid", edit } = props;
+  const quotes = parseItems(items);
+  const featured = layout === "single" ? quotes.slice(0, 1) : quotes;
+
+  return (
+    <Section tint>
+      {heading &&
+        renderText(edit, {
+          field: "heading",
+          value: heading,
+          as: "h2",
+          placeholder: "Kind words",
+          className: "mb-10 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light",
+          style: { fontFamily: HEADING, color: TEXT },
+        })}
+      {layout === "single" && featured[0] ? (
+        <figure className="mx-auto max-w-3xl text-center">
+          <blockquote
+            className="text-[clamp(1.3rem,3vw,2rem)] font-light leading-snug"
+            style={{ fontFamily: HEADING, color: TEXT }}
+          >
+            “{featured[0].quote}”
+          </blockquote>
+          <figcaption className="mt-5 text-sm" style={{ fontFamily: BODY, color: MUTED }}>
+            {featured[0].author}
+            {featured[0].role ? ` · ${featured[0].role}` : ""}
+          </figcaption>
+        </figure>
+      ) : (
+        <div className="grid gap-5 md:grid-cols-3">
+          {featured.map((q, i) => (
+            <figure key={i} className="p-6" style={{ borderRadius: RADIUS, background: TINT }}>
+              <blockquote className="text-[15px] leading-relaxed" style={{ fontFamily: BODY, color: TEXT }}>
+                “{q.quote}”
+              </blockquote>
+              <figcaption className="mt-4 flex items-center gap-3 text-sm" style={{ fontFamily: BODY, color: MUTED }}>
+                {q.portrait && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={q.portrait} alt={q.author} className="size-9 rounded-full object-cover" loading="lazy" />
+                )}
+                <span>
+                  <span style={{ color: TEXT }}>{q.author}</span>
+                  {q.role ? ` · ${q.role}` : ""}
+                </span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      )}
+    </Section>
+  );
+}