@jimmy_harika/websitekit 0.4.0 → 0.5.0

package/README.md

@@ -26,6 +26,7 @@ perf moat heavy runtimes can't match.
 | `@jimmy_harika/websitekit/renderer` | `PageRenderer` / `PageFonts` (RSC-safe production render) |
 | `@jimmy_harika/websitekit/store` | zustand + zundo store |
 | `@jimmy_harika/websitekit/blocks` | Design-system-agnostic blocks — render off `--pb-*` theme tokens, no app-UI imports (this is what makes a block portable to every app) |
+| `@jimmy_harika/websitekit/blocks` (v0.5 additions) | Site-system blocks for photographer-caliber templates — `NavBlock`, `HeroSlideshowBlock`, `BannerQuoteBlock`, `LogoBandBlock`, `TeaserCardsBlock`, `CategoryShowcaseBlock`, `TestimonialSliderBlock`, `SiteFooterBlock`, plus the `Reveal` scroll-reveal + shared `Slider` islands and theme `buttonStyle`/`headingCase`/`reveal` |
 | `@jimmy_harika/websitekit/catalogs/author` | Author-website catalog + templates |
 
 ## The app contract

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Snow Labs website builder engine. Block-agnostic, curated-section. One shared builder across every Snow Labs app — engine + design-system-agnostic blocks + per-industry catalogs (author, photographer, …). Each app plugs in a catalog + theme + persistence adapter.",
   "license": "UNLICENSED",
   "private": false,

package/src/blocks/back-to-top.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+/**
+ * BackToTop — micro client island for SiteFooterBlock. Smooth-scrolls to the
+ * top (instant under prefers-reduced-motion).
+ */
+import { BODY, MUTED } from "./primitives";
+
+export function BackToTop() {
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        const reduced =
+          typeof window.matchMedia === "function" &&
+          window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        window.scrollTo({ top: 0, behavior: reduced ? "auto" : "smooth" });
+      }}
+      className="text-[11px] uppercase tracking-[0.25em] transition-opacity hover:opacity-70"
+      style={{ fontFamily: BODY, color: MUTED }}
+    >
+      Back to top ↑
+    </button>
+  );
+}

package/src/blocks/banner-quote.tsx

@@ -0,0 +1,89 @@
+/**
+ * BannerQuoteBlock — a single statement quote as a full-width band. With
+ * `image` it renders over the photo behind a scrim; without, a flat tinted
+ * band in theme tokens. Server-safe, edit-aware.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { ACCENT, BODY, HEADING, MUTED, Section, TEXT, TINT } from "./primitives";
+
+export interface BannerQuoteBlockProps {
+  quote: string;
+  attribution?: string;
+  /** Background photo — rendered behind a dark scrim with light text. */
+  image?: string;
+  align?: "center" | "split";
+  edit?: EditPrimitives;
+}
+
+export function BannerQuoteBlock({
+  quote,
+  attribution,
+  image,
+  align = "center",
+  edit,
+}: BannerQuoteBlockProps) {
+  const onPhoto = Boolean(image);
+  const quoteColor = onPhoto ? "#ffffff" : TEXT;
+  const metaColor = onPhoto ? "rgba(255,255,255,0.75)" : MUTED;
+
+  const quoteEl = renderText(edit, {
+    field: "quote",
+    value: quote,
+    as: "blockquote",
+    placeholder: "A line you want remembered.",
+    multiline: true,
+    className:
+      align === "split"
+        ? "text-[clamp(1.4rem,3.2vw,2.25rem)] font-light italic leading-snug"
+        : "mx-auto max-w-3xl text-center text-[clamp(1.4rem,3.5vw,2.5rem)] font-light italic leading-snug",
+    style: { fontFamily: HEADING, color: quoteColor },
+  });
+
+  const attributionEl =
+    attribution || edit
+      ? renderText(edit, {
+          field: "attribution",
+          value: attribution ?? "",
+          as: "p",
+          placeholder: "Someone kind",
+          className:
+            align === "split"
+              ? "text-[11px] uppercase tracking-[0.3em]"
+              : "mt-6 text-center text-[11px] uppercase tracking-[0.3em]",
+          style: { fontFamily: BODY, color: onPhoto ? metaColor : ACCENT },
+        })
+      : null;
+
+  const body =
+    align === "split" ? (
+      <div className="mx-auto grid max-w-5xl items-end gap-8 md:grid-cols-[1fr_auto]">
+        <div>{quoteEl}</div>
+        <div className="md:pb-2">{attributionEl}</div>
+      </div>
+    ) : (
+      <div className="mx-auto max-w-4xl">
+        {quoteEl}
+        {attributionEl}
+      </div>
+    );
+
+  if (!onPhoto) {
+    return <Section style={{ background: TINT }}>{body}</Section>;
+  }
+
+  return (
+    <section className="relative w-full overflow-hidden">
+      <div className="absolute inset-0">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={image} alt="" loading="lazy" className="h-full w-full object-cover" />
+      </div>
+      <div className="absolute inset-0" style={{ background: "rgba(0,0,0,0.5)" }} />
+      <div
+        className="relative px-6 sm:px-10"
+        style={{ paddingBlock: "calc(var(--pb-spacing, 1) * 7rem)" }}
+      >
+        {body}
+      </div>
+    </section>
+  );
+}

package/src/blocks/category-showcase.tsx

@@ -0,0 +1,107 @@
+/**
+ * CategoryShowcaseBlock — editorial category columns (e.g. Weddings /
+ * Portraits / Editorial) with staggered heights and small-caps captions.
+ * Even columns drop down on desktop for the staggered-editorial look.
+ * Server-safe, edit-aware heading.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import {
+  BODY,
+  HEADING,
+  HEADING_CASE,
+  MUTED,
+  RADIUS,
+  Section,
+  TEXT,
+  TokenButton,
+} from "./primitives";
+
+export interface CategoryShowcaseItem {
+  title: string;
+  image: string;
+  href?: string;
+}
+
+export interface CategoryShowcaseBlockProps {
+  heading?: string;
+  items?: CategoryShowcaseItem[];
+  ctaLabel?: string;
+  ctaHref?: string;
+  edit?: EditPrimitives;
+}
+
+/** Literal class strings so Tailwind's scanner picks them up. */
+const GRID_COLS: Record<number, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 md:grid-cols-3",
+  4: "sm:grid-cols-2 md:grid-cols-4",
+};
+
+export function CategoryShowcaseBlock({
+  heading,
+  items = [],
+  ctaLabel,
+  ctaHref,
+  edit,
+}: CategoryShowcaseBlockProps) {
+  const cols = Math.min(Math.max(items.length, 2), 4);
+
+  return (
+    <Section>
+      {(heading || edit) &&
+        renderText(edit, {
+          field: "heading",
+          value: heading ?? "",
+          as: "h2",
+          placeholder: "Explore the work",
+          className: "mb-12 text-center text-[clamp(1.6rem,4vw,2.5rem)] font-light",
+          style: { fontFamily: HEADING, color: TEXT, textTransform: HEADING_CASE },
+        })}
+      {items.length === 0 ? (
+        <p className="py-8 text-center text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add categories (title + image).
+        </p>
+      ) : (
+        <div className={`grid gap-6 md:gap-8 ${GRID_COLS[cols]}`}>
+          {items.map((item, i) => {
+            const staggered = i % 2 === 1;
+            const figure = (
+              <figure className={staggered ? "md:mt-14" : undefined}>
+                <div
+                  className={`w-full overflow-hidden ${staggered ? "aspect-[3/4]" : "aspect-[7/10]"}`}
+                  style={{ borderRadius: RADIUS }}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={item.image}
+                    alt={item.title}
+                    loading="lazy"
+                    className="h-full w-full object-cover transition duration-500 hover:scale-[1.03]"
+                  />
+                </div>
+                <figcaption
+                  className="mt-4 text-center text-[11px] uppercase tracking-[0.3em]"
+                  style={{ fontFamily: BODY, color: TEXT }}
+                >
+                  {item.title}
+                </figcaption>
+              </figure>
+            );
+            return item.href ? (
+              <a key={i} href={item.href} className="block">
+                {figure}
+              </a>
+            ) : (
+              <div key={i}>{figure}</div>
+            );
+          })}
+        </div>
+      )}
+      {ctaLabel && ctaHref && (
+        <div className="mt-12 text-center">
+          <TokenButton href={ctaHref}>{ctaLabel}</TokenButton>
+        </div>
+      )}
+    </Section>
+  );
+}

package/src/blocks/hero-slideshow.tsx

@@ -0,0 +1,151 @@
+/**
+ * HeroSlideshowBlock — full-bleed crossfade hero ("fade") or center-dominant
+ * filmstrip with peeking neighbors ("filmstrip"). Server-safe: the images and
+ * copy render here; index state lives in the shared <Slider> island.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { BODY, HEADING, HEADING_CASE, MUTED, RADIUS, TEXT } from "./primitives";
+import { Slider } from "./slider";
+
+export interface HeroSlideshowBlockProps {
+  images: string[];
+  headline?: string;
+  sub?: string;
+  align?: "center" | "left" | "bottom-left";
+  height?: "full" | "tall";
+  variant?: "fade" | "filmstrip";
+  /** Auto-advance every ~5s (off by default; disabled under reduced motion). */
+  autoplay?: boolean;
+  edit?: EditPrimitives;
+}
+
+const ALIGN: Record<NonNullable<HeroSlideshowBlockProps["align"]>, string> = {
+  center: "items-center justify-center text-center",
+  left: "items-center justify-start text-left",
+  "bottom-left": "items-end justify-start pb-16 text-left",
+};
+
+export function HeroSlideshowBlock({
+  images,
+  headline,
+  sub,
+  align = "center",
+  height = "full",
+  variant = "fade",
+  autoplay = false,
+  edit,
+}: HeroSlideshowBlockProps) {
+  const shots = images ?? [];
+  const autoplayMs = autoplay ? 5000 : 0;
+
+  if (shots.length === 0) {
+    return (
+      <section className="flex min-h-[40vh] items-center justify-center px-6">
+        <p className="text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add slideshow images.
+        </p>
+      </section>
+    );
+  }
+
+  if (variant === "filmstrip") {
+    return (
+      <section
+        className="w-full overflow-hidden"
+        style={{ paddingBlock: "calc(var(--pb-spacing, 1) * 4rem)" }}
+      >
+        {(headline || edit) && (
+          <div className="mx-auto mb-10 max-w-3xl px-6 text-center">
+            {renderText(edit, {
+              field: "headline",
+              value: headline ?? "",
+              as: "h1",
+              placeholder: "A headline for your work",
+              className: "text-[clamp(2rem,5vw,3.5rem)] font-light leading-tight",
+              style: { fontFamily: HEADING, color: TEXT, textTransform: HEADING_CASE },
+            })}
+            {(sub || edit) &&
+              renderText(edit, {
+                field: "sub",
+                value: sub ?? "",
+                as: "p",
+                placeholder: "A short supporting line.",
+                className: "mt-4 text-base leading-relaxed",
+                style: { fontFamily: BODY, color: MUTED },
+              })}
+          </div>
+        )}
+        <Slider
+          variant="track"
+          arrows="below"
+          autoplayMs={autoplayMs}
+          slideWidth="min(72vw, 880px)"
+          label={headline || "Featured work"}
+          slides={shots.map((src, i) => (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              key={i}
+              src={src}
+              alt=""
+              loading={i === 0 ? "eager" : "lazy"}
+              className="aspect-[3/2] w-full object-cover"
+              style={{ borderRadius: RADIUS }}
+            />
+          ))}
+        />
+      </section>
+    );
+  }
+
+  // fade — overlay copy defines the container height.
+  const minH = height === "tall" ? "min-h-[70vh]" : "min-h-[100svh]";
+  return (
+    <Slider
+      variant="fade"
+      arrows="overlay"
+      autoplayMs={autoplayMs}
+      label={headline || "Slideshow"}
+      slides={shots.map((src, i) => (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          key={i}
+          src={src}
+          alt=""
+          loading={i === 0 ? "eager" : "lazy"}
+          fetchPriority={i === 0 ? "high" : "auto"}
+          className="h-full w-full object-cover"
+        />
+      ))}
+      overlay={
+        <>
+          <div
+            className="absolute inset-0"
+            style={{ background: "linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.45))" }}
+          />
+          <div className={`relative flex ${minH} w-full px-6 sm:px-14 ${ALIGN[align]}`}>
+            <div className="max-w-3xl">
+              {(headline || edit) &&
+                renderText(edit, {
+                  field: "headline",
+                  value: headline ?? "",
+                  as: "h1",
+                  placeholder: "A headline for your work",
+                  className: "text-[clamp(2.25rem,7vw,5rem)] font-light leading-[1.02] text-white",
+                  style: { fontFamily: HEADING, textTransform: HEADING_CASE },
+                })}
+              {(sub || edit) &&
+                renderText(edit, {
+                  field: "sub",
+                  value: sub ?? "",
+                  as: "p",
+                  placeholder: "A short supporting line.",
+                  className: "mt-5 max-w-xl text-[13px] uppercase tracking-[0.3em] text-white/80",
+                  style: { fontFamily: BODY },
+                })}
+            </div>
+          </div>
+        </>
+      }
+    />
+  );
+}

package/src/blocks/index.ts

@@ -10,15 +10,26 @@ export {
   ACCENT,
   BG,
   BODY,
+  BTN_BG,
+  BTN_BORDER,
+  BTN_FG,
+  HAIRLINE,
   HEADING,
+  HEADING_CASE,
   MUTED,
   RADIUS,
   TEXT,
+  TINT,
   Section,
   Eyebrow,
   AccentLink,
+  TokenButton,
 } from "./primitives";
 
+// v0.5 system layer — reveal + shared slider island
+export { Reveal, type RevealProps } from "./reveal";
+export { Slider, type SliderProps } from "./slider";
+
 export { AuthorHero, type AuthorHeroProps } from "./author-hero";
 export { AuthorBio, type AuthorBioProps } from "./author-bio";
 export { BookSpotlight, type BookSpotlightProps } from "./book-spotlight";
@@ -30,3 +41,32 @@ export { Form, type FormProps } from "./form";
 export { Pricing, type PricingProps } from "./pricing";
 export { Testimonials, type TestimonialsProps } from "./testimonials";
 export { Faq, type FaqProps } from "./faq";
+
+// v0.5 blocks — the Pixieset-caliber photographer-template layer
+export { NavBlock, type NavBlockProps, type NavLinkItem } from "./nav";
+export { NavMenu } from "./nav-menu";
+export {
+  HeroSlideshowBlock,
+  type HeroSlideshowBlockProps,
+} from "./hero-slideshow";
+export { BannerQuoteBlock, type BannerQuoteBlockProps } from "./banner-quote";
+export { LogoBandBlock, type LogoBandBlockProps, type LogoBandItem } from "./logo-band";
+export { TeaserCardsBlock, type TeaserCardsBlockProps, type TeaserCardItem } from "./teaser-cards";
+export {
+  CategoryShowcaseBlock,
+  type CategoryShowcaseBlockProps,
+  type CategoryShowcaseItem,
+} from "./category-showcase";
+export {
+  TestimonialSliderBlock,
+  type TestimonialSliderBlockProps,
+  type TestimonialSlideItem,
+} from "./testimonial-slider";
+export {
+  SiteFooterBlock,
+  type SiteFooterBlockProps,
+  type SiteFooterNavLink,
+  type SiteFooterSocial,
+  type SiteFooterSocialKind,
+} from "./site-footer";
+export { BackToTop } from "./back-to-top";

package/src/blocks/logo-band.tsx

@@ -0,0 +1,62 @@
+/**
+ * LogoBandBlock — press / "as seen in" strip on a tinted band. Items render as
+ * grayscale image logos when `image` is set, otherwise as letterspaced
+ * small-caps text names. Server-safe, edit-aware heading.
+ */
+import { renderText, type EditPrimitives } from "../editable";
+import { ACCENT, BODY, MUTED, Section } from "./primitives";
+
+export interface LogoBandItem {
+  name: string;
+  image?: string;
+}
+
+export interface LogoBandBlockProps {
+  heading?: string;
+  items?: LogoBandItem[];
+  edit?: EditPrimitives;
+}
+
+export function LogoBandBlock({ heading, items = [], edit }: LogoBandBlockProps) {
+  return (
+    <Section tint style={{ paddingBlock: "calc(var(--pb-spacing, 1) * 3rem)" }}>
+      {(heading || edit) &&
+        renderText(edit, {
+          field: "heading",
+          value: heading ?? "",
+          as: "p",
+          placeholder: "As seen in",
+          className: "mb-8 text-center text-[11px] uppercase tracking-[0.3em]",
+          style: { fontFamily: BODY, color: ACCENT },
+        })}
+      {items.length === 0 ? (
+        <p className="text-center text-sm" style={{ color: MUTED, fontFamily: BODY }}>
+          Add logos or publication names.
+        </p>
+      ) : (
+        <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
+          {items.map((item, i) => (
+            <li key={i} className="flex items-center">
+              {item.image ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={item.image}
+                  alt={item.name}
+                  loading="lazy"
+                  className="h-7 w-auto object-contain opacity-70 grayscale"
+                />
+              ) : (
+                <span
+                  className="text-[13px] uppercase tracking-[0.25em]"
+                  style={{ fontFamily: BODY, color: MUTED }}
+                >
+                  {item.name}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Section>
+  );
+}

package/src/blocks/nav-menu.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+/**
+ * Mobile nav island for NavBlock — hamburger button + full-screen overlay menu.
+ * Only this ships JS; the desktop nav stays pure server markup. Reads the same
+ * `--pb-*` tokens (they inherit into the fixed overlay through the DOM tree).
+ */
+import { useEffect, useState } from "react";
+import { BG, BODY, HEADING, MUTED, TEXT } from "./primitives";
+import type { NavLinkItem } from "./nav";
+
+export function NavMenu({
+  links,
+  logoText,
+  light,
+}: {
+  links: NavLinkItem[];
+  logoText?: string;
+  /** Render the trigger in light-on-dark (for transparent navs over photos). */
+  light?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+
+  return (
+    <div className="md:hidden">
+      <button
+        type="button"
+        aria-label="Open menu"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        className="flex size-10 flex-col items-center justify-center gap-[5px]"
+      >
+        <span className="block h-px w-5" style={{ background: light ? "#ffffff" : TEXT }} />
+        <span className="block h-px w-5" style={{ background: light ? "#ffffff" : TEXT }} />
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex flex-col overflow-y-auto px-8 py-6"
+          style={{ background: BG, color: TEXT }}
+        >
+          <div className="flex items-center justify-between">
+            <span
+              className="text-[13px] uppercase tracking-[0.3em]"
+              style={{ fontFamily: BODY, color: TEXT }}
+            >
+              {logoText ?? ""}
+            </span>
+            <button
+              type="button"
+              aria-label="Close menu"
+              onClick={() => setOpen(false)}
+              className="flex size-10 items-center justify-center text-2xl font-light"
+              style={{ color: TEXT }}
+            >
+              ×
+            </button>
+          </div>
+          <nav className="mt-12 flex flex-1 flex-col gap-6">
+            {links.map((link, i) => (
+              <div key={i}>
+                <a
+                  href={link.href || "#"}
+                  onClick={() => setOpen(false)}
+                  className="text-3xl font-light"
+                  style={{ fontFamily: HEADING, color: TEXT }}
+                >
+                  {link.label}
+                </a>
+                {link.children && link.children.length > 0 && (
+                  <div className="mt-3 flex flex-col gap-2 pl-1">
+                    {link.children.map((child, j) => (
+                      <a
+                        key={j}
+                        href={child.href || "#"}
+                        onClick={() => setOpen(false)}
+                        className="text-[13px] uppercase tracking-[0.2em]"
+                        style={{ fontFamily: BODY, color: MUTED }}
+                      >
+                        {child.label}
+                      </a>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}