@bygghammar/cms-platform 0.1.0

package/src/blocks/components/ImageMarqueeBlock.tsx

@@ -0,0 +1,209 @@
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { FocalImage } from "../../host";
+import type { ImageMarqueeProps, ImageMarqueeItem } from "../types";
+
+const TONE: Record<string, string> = {
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+};
+
+const GAP: Record<string, string> = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+const ASPECT: Record<string, string> = {
+  portrait: "aspect-[3/4]",
+  square: "aspect-square",
+  landscape: "aspect-[4/3]",
+  mixed: "",
+};
+
+const SPEED_SECONDS: Record<string, number> = {
+  "ultra-slow": 160,
+  "very-slow": 110,
+  slow: 70,
+  normal: 45,
+  fast: 28,
+};
+
+const MIXED_CYCLE = ["aspect-[3/4]", "aspect-square", "aspect-[4/3]", "aspect-[3/4]"];
+
+function Tile({
+  item,
+  aspectClass,
+  rounded,
+}: {
+  item: ImageMarqueeItem;
+  aspectClass: string;
+  rounded: boolean;
+}) {
+  const { t } = useT();
+  const alt = item.alt ? t(item.alt as Parameters<typeof t>[0]) : "";
+  return (
+    <div
+      className={`relative w-full overflow-hidden bg-ink/5 ${aspectClass} ${
+        rounded ? "rounded-2xl" : ""
+      }`}
+    >
+      {item.image ? (
+        <FocalImage
+          src={item.image}
+          alt={alt}
+          loading="lazy"
+          responsive={false}
+          className="absolute inset-0 h-full w-full object-cover"
+        />
+      ) : null}
+
+    </div>
+  );
+}
+
+/**
+ * Two (or more) columns of photos drifting slowly in opposite directions on
+ * desktop; one continuous left-to-right strip on mobile. Optional editorial
+ * text column beside the marquee. Motion respects `prefers-reduced-motion`.
+ */
+export function ImageMarqueeBlock({ props }: { props: ImageMarqueeProps }) {
+  const { t } = useT();
+  const items = (props.items ?? []).filter((i) => i.image);
+  const columnCount = Math.min(3, Math.max(1, props.columns ?? 2));
+  const textPosition = props.textPosition ?? "left";
+  const hasText = textPosition !== "none";
+  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+  const gap = GAP[props.gap ?? "md"] ?? GAP.md;
+  const rounded = props.rounded ?? false;
+  const duration = SPEED_SECONDS[props.speed ?? "normal"] ?? SPEED_SECONDS.normal;
+  const firstUp = (props.firstDirection ?? "up") === "up";
+  const textItems = props.items2 ?? [];
+
+  // Images can be pinned to a specific column. Unpinned images fill the
+  // remaining columns (and any column left empty after pinning), so every
+  // configured column stays populated.
+  const hasPinned = items.some((i) => Number(i.column) >= 1);
+  const unpinned = items.filter((i) => !(Number(i.column) >= 1));
+
+  const columns: ImageMarqueeItem[][] = Array.from({ length: columnCount }, (_, columnIndex) => {
+    const pinned = hasPinned
+      ? items.filter((i) => Number(i.column) === columnIndex + 1)
+      : [];
+    if (pinned.length > 0) return pinned;
+    const pool = unpinned.length > 0 ? unpinned : items;
+    if (pool.length === 0) return [];
+    return pool.map((_, i) => pool[(i + columnIndex) % pool.length]).filter(Boolean);
+  });
+
+  const aspectFor = (i: number) =>
+    (props.aspect ?? "portrait") === "mixed"
+      ? MIXED_CYCLE[i % MIXED_CYCLE.length]
+      : ASPECT[props.aspect ?? "portrait"] ?? ASPECT.portrait;
+
+  const marquee = (
+    <div className="relative">
+      {/* Always honour the selected column count, including inside the builder. */}
+      <div
+        className={`grid ${gap} marquee-mask-y h-[clamp(520px,72vh,820px)] overflow-hidden`}
+        style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}
+      >
+        {columns.map((col, ci) => {
+          const up = ci % 2 === 0 ? firstUp : !firstUp;
+          return (
+            <div key={ci} className="relative overflow-hidden">
+              <div
+                className={`flex flex-col ${gap} ${up ? "marquee-up" : "marquee-down"}`}
+                style={{ animationDuration: `${duration + ci * 6}s` }}
+              >
+                {[0, 1].map((dup) => (
+                  <div key={dup} className={`flex flex-col ${gap}`} aria-hidden={dup === 1}>
+                    {col.map((item, i) => (
+                      <Tile
+                        key={`${item.id ?? i}-${dup}`}
+                        item={item}
+                        aspectClass={aspectFor(i + ci)}
+                        rounded={rounded}
+                      />
+                    ))}
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+    </div>
+  );
+
+  const text = hasText ? (
+    <div className="max-w-xl">
+      {props.eyebrow ? (
+        <span className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/70">
+          {t(props.eyebrow)}
+        </span>
+      ) : null}
+      {props.title ? (
+        <h2 className="mt-4 font-serif text-[clamp(1.9rem,4vw,3.25rem)] leading-[1.05] tracking-[-0.02em] text-ink whitespace-pre-line">
+          {t(props.title)}
+        </h2>
+      ) : null}
+      {props.lead ? (
+        <p className="mt-6 text-lg leading-relaxed text-ink/85 whitespace-pre-line">
+          {t(props.lead)}
+        </p>
+      ) : null}
+      {textItems.length > 0 ? (
+        <div className="mt-10 space-y-8">
+          {textItems.map((item, i) => (
+            <article key={item.id ?? i} className="border-t border-ink/10 pt-6">
+              {item.heading ? (
+                <h3 className="font-serif text-xl md:text-2xl text-ink whitespace-pre-line">{t(item.heading)}</h3>
+              ) : null}
+              {item.body ? (
+                <p className="mt-3 leading-relaxed text-ink/80 whitespace-pre-line">
+                  {t(item.body)}
+                </p>
+              ) : null}
+            </article>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  ) : null;
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-20 md:py-28 overflow-hidden`}>
+      <style>{`
+        @keyframes cms-marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
+        @keyframes cms-marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
+        @keyframes cms-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+        .marquee-up { animation-name: cms-marquee-up; animation-timing-function: linear; animation-iteration-count: infinite; }
+        .marquee-down { animation-name: cms-marquee-down; animation-timing-function: linear; animation-iteration-count: infinite; }
+        .marquee-x { animation-name: cms-marquee-x; animation-timing-function: linear; animation-iteration-count: infinite; }
+        .marquee-up:hover, .marquee-down:hover, .marquee-x:hover { animation-play-state: paused; }
+        .marquee-mask-y { -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent); }
+        .marquee-mask-x { -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
+        @media (prefers-reduced-motion: reduce) {
+          .marquee-up, .marquee-down, .marquee-x { animation: none !important; }
+        }
+      `}</style>
+      <div className="container-editorial">
+        {hasText ? (
+          <div
+            className={`grid items-center gap-12 lg:gap-16 lg:grid-cols-2 ${
+              textPosition === "right" ? "lg:[&>*:first-child]:order-2" : ""
+            }`}
+          >
+            <Reveal>{text}</Reveal>
+            <div className="min-w-0">{marquee}</div>
+          </div>
+        ) : (
+          <div className="min-w-0">{marquee}</div>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/InstagramBlock.tsx

@@ -0,0 +1,160 @@
+import { Instagram as InstagramIcon, ExternalLink } from "lucide-react";
+import { useT } from "../../i18n";
+import type { InstagramProps, InstagramItem } from "../types";
+import { FocalImage } from "../../host";
+
+const GAP_CLASS: Record<NonNullable<InstagramProps["gap"]>, string> = {
+  none: "gap-0",
+  sm: "gap-1.5 md:gap-2",
+  md: "gap-3 md:gap-4",
+  lg: "gap-5 md:gap-8",
+};
+
+const ASPECT_CLASS: Record<NonNullable<InstagramProps["aspect"]>, string> = {
+  square: "aspect-square",
+  portrait: "aspect-[4/5]",
+  landscape: "aspect-[4/3]",
+};
+
+function clamp(n: number | undefined, min: number, max: number, fallback: number) {
+  const v = typeof n === "number" && Number.isFinite(n) ? n : fallback;
+  return Math.min(max, Math.max(min, v));
+}
+
+function Tile({
+  item,
+  aspect,
+  showOverlay,
+}: {
+  item: InstagramItem;
+  aspect: NonNullable<InstagramProps["aspect"]>;
+  showOverlay: boolean;
+}) {
+  const { t } = useT();
+  const alt = item.alt ? t(item.alt as Parameters<typeof t>[0]) : "";
+  const inner = (
+    <div className={`relative ${ASPECT_CLASS[aspect]} bg-ink/5 overflow-hidden group`}>
+      {item.image ? (
+        <FocalImage
+          src={item.image}
+          responsive={false}
+          alt={alt}
+          loading="lazy"
+          className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+        />
+      ) : (
+        <div className="absolute inset-0 grid place-items-center text-ink/25">
+          <InstagramIcon className="size-8" />
+        </div>
+      )}
+      {showOverlay && item.image ? (
+        <div className="absolute inset-0 grid place-items-center bg-ink/0 group-hover:bg-ink/40 transition-colors">
+          <InstagramIcon className="size-6 text-paper opacity-0 group-hover:opacity-100 transition-opacity" />
+        </div>
+      ) : null}
+    </div>
+  );
+
+  if (item.href) {
+    return (
+      <a href={item.href} target="_blank" rel="noreferrer noopener" className="block">
+        {inner}
+      </a>
+    );
+  }
+  return inner;
+}
+
+export function InstagramBlock({ props }: { props: InstagramProps }) {
+  const { t } = useT();
+  const layout = props.layout ?? "grid";
+  const cM = clamp(props.columnsMobile, 1, 4, 2);
+  const cT = clamp(props.columnsTablet, 2, 6, 3);
+  const cD = clamp(props.columnsDesktop, 2, 8, 4);
+  const rows = clamp(props.rows, 1, 8, 2);
+  const gap = GAP_CLASS[props.gap ?? "md"];
+  const aspect = props.aspect ?? "square";
+  const showOverlay = props.showOverlay ?? true;
+  const showHeader = props.showHeader ?? true;
+
+  const allItems = props.items ?? [];
+  const limit = layout === "grid" ? cD * rows : allItems.length;
+  const items = allItems.slice(0, limit);
+
+  const handle = (props.handle ?? "").replace(/^@/, "");
+  const profileHref =
+    props.profileHref ?? (handle ? `https://instagram.com/${handle}` : undefined);
+
+  // Inline styles for arbitrary column counts (Tailwind JIT can't infer runtime numbers).
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: `repeat(var(--ig-cols, ${cM}), minmax(0, 1fr))`,
+  } as React.CSSProperties;
+
+  return (
+    <section className="bg-white py-20 md:py-28">
+      <div className="mx-auto max-w-7xl px-6">
+        {showHeader ? (
+          <div className="mb-10 md:mb-14 flex flex-wrap items-end justify-between gap-4">
+            <div>
+              {props.title ? (
+                <h2 className="font-serif text-3xl md:text-5xl text-ink whitespace-pre-line">
+                  {t(props.title as Parameters<typeof t>[0])}
+                </h2>
+              ) : null}
+              {handle ? (
+                <div className="mt-2 text-sm text-ink/60 flex items-center gap-1.5">
+                  <InstagramIcon className="size-4" />
+                  <span>@{handle}</span>
+                </div>
+              ) : null}
+            </div>
+            {profileHref ? (
+              <a
+                href={profileHref}
+                target="_blank"
+                rel="noreferrer noopener"
+                className="inline-flex items-center gap-2 border border-ink/20 px-4 py-2 text-sm text-ink hover:border-sea hover:text-sea transition-colors"
+              >
+                Follow <ExternalLink className="size-3.5" />
+              </a>
+            ) : null}
+          </div>
+        ) : null}
+
+        {layout === "carousel" ? (
+          <div className={`flex overflow-x-auto snap-x snap-mandatory ${gap} -mx-6 px-6 pb-2`}>
+            {items.map((item) => (
+              <div
+                key={item.id}
+                className="snap-start shrink-0"
+                style={{ width: `min(80vw, ${100 / cD}%)` }}
+              >
+                <Tile item={item} aspect={aspect} showOverlay={showOverlay} />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <>
+            <style>{`
+              .ig-grid { --ig-cols: ${cM}; }
+              @media (min-width: 768px) { .ig-grid { --ig-cols: ${cT}; } }
+              @media (min-width: 1024px) { .ig-grid { --ig-cols: ${cD}; } }
+            `}</style>
+            <div className={`ig-grid ${gap}`} style={gridStyle}>
+              {items.map((item) => (
+                <Tile key={item.id} item={item} aspect={aspect} showOverlay={showOverlay} />
+              ))}
+            </div>
+          </>
+        )}
+
+        {items.length === 0 ? (
+          <div className="mt-8 border border-dashed border-ink/15 p-10 text-center text-ink/70 text-sm">
+            No Instagram posts yet. Add images in the block inspector.
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/LinkTilesBlock.tsx

@@ -0,0 +1,182 @@
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { FocalImage } from "../../host";
+import type { LinkTilesProps, LinkTilesItem } from "../types";
+
+const TONE: Record<string, string> = {
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+  ink: "bg-ink",
+};
+
+const GAP: Record<string, string> = {
+  sm: "gap-3",
+  md: "gap-5",
+  lg: "gap-8",
+};
+
+const ASPECT: Record<string, string> = {
+  portrait: "aspect-[3/4]",
+  square: "aspect-square",
+  landscape: "aspect-[4/3]",
+  tall: "aspect-[2/3]",
+};
+
+const COLS: Record<number, string> = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+};
+
+function Tile({
+  item,
+  aspectClass,
+  rounded,
+  overlay,
+  labelAlign,
+}: {
+  item: LinkTilesItem;
+  aspectClass: string;
+  rounded: boolean;
+  overlay: "none" | "light" | "medium" | "strong" | "brand";
+  labelAlign: "left" | "center";
+}) {
+  const { t } = useT();
+  const label = t(item.label);
+  const alt = item.alt ? t(item.alt) : label;
+  const overlayClass =
+    overlay === "none"
+      ? ""
+      : overlay === "brand"
+        ? "bg-gradient-to-t from-sea/70 via-ink/35 to-transparent mix-blend-multiply"
+        : overlay === "light"
+          ? "bg-gradient-to-t from-ink/55 via-ink/10 to-transparent"
+          : overlay === "strong"
+            ? "bg-gradient-to-t from-ink/90 via-ink/45 to-ink/10"
+            : "bg-gradient-to-t from-ink/80 via-ink/30 to-transparent";
+
+  const inner = (
+    <>
+      {item.image ? (
+        <FocalImage
+          src={item.image}
+          alt={alt}
+          loading="lazy"
+          sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 30vw"
+          className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.04]"
+        />
+      ) : null}
+      {overlay !== "none" ? <div className={`absolute inset-0 ${overlayClass}`} /> : null}
+      <div
+        className={`relative flex h-full flex-col justify-end p-6 md:p-7 ${
+          labelAlign === "center" ? "items-center text-center" : "items-start"
+        }`}
+      >
+        {item.eyebrow ? (
+          <span className="text-[0.65rem] uppercase tracking-[0.22em] text-paper/75">
+            {t(item.eyebrow)}
+          </span>
+        ) : null}
+        {label ? (
+          <span className="mt-3 inline-flex items-center justify-center bg-sea px-6 py-3 text-xs uppercase tracking-[0.22em] text-ink shadow-lg transition-colors hover:bg-ink hover:text-paper">
+            {label}
+          </span>
+        ) : null}
+        {item.body ? (
+          <span className="mt-3 max-w-[26ch] text-sm leading-relaxed text-paper/85">
+            {t(item.body)}
+          </span>
+        ) : null}
+      </div>
+    </>
+  );
+
+  const frame = `group relative block w-full overflow-hidden bg-ink/10 ${aspectClass} ${
+    rounded ? "rounded-2xl" : ""
+  }`;
+
+  if (!item.href) return <div className={frame}>{inner}</div>;
+
+  const external = /^https?:\/\//i.test(item.href);
+  return (
+    <a
+      href={item.href}
+      {...(external ? { target: "_blank", rel: "noreferrer" } : {})}
+      className={frame}
+    >
+      {inner}
+    </a>
+  );
+}
+
+/**
+ * Row of linked image tiles with an overlay label.
+ * Every tile's image, text and link is editable in the backoffice.
+ */
+export function LinkTilesBlock({ props }: { props: LinkTilesProps }) {
+  const { t } = useT();
+  const items = props.items ?? [];
+  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+  const dark = (props.tone ?? "white") === "ink";
+  const gap = GAP[props.gap ?? "md"] ?? GAP.md;
+  const aspect = ASPECT[props.aspect ?? "portrait"] ?? ASPECT.portrait;
+  const cols = COLS[props.columns ?? 3] ?? COLS[3];
+
+  if (items.length === 0) return null;
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-16 md:py-24`}>
+      <div className="container-editorial">
+        {props.eyebrow || props.title || props.lead ? (
+          <Reveal>
+            <div className="mb-10 max-w-2xl">
+              {props.eyebrow ? (
+                <span
+                  className={`text-[0.7rem] uppercase tracking-[0.22em] ${
+                    dark ? "text-paper/70" : "text-ink/60"
+                  }`}
+                >
+                  {t(props.eyebrow)}
+                </span>
+              ) : null}
+              {props.title ? (
+                <h2
+                  className={`mt-3 font-serif text-[clamp(1.7rem,3.4vw,2.75rem)] leading-[1.08] ${
+                    dark ? "text-paper" : "text-ink"
+                  }`}
+                >
+                  {t(props.title)}
+                </h2>
+              ) : null}
+              {props.lead ? (
+                <p
+                  className={`mt-4 text-base leading-relaxed ${
+                    dark ? "text-paper/80" : "text-ink/70"
+                  }`}
+                >
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        ) : null}
+        <Reveal>
+          <div className={`grid grid-cols-1 ${cols} ${gap}`}>
+            {items.map((item, i) => (
+              <Tile
+                key={item.id ?? i}
+                item={item}
+                aspectClass={aspect}
+                rounded={props.rounded ?? false}
+                overlay={props.overlay ?? "medium"}
+                labelAlign={props.labelAlign ?? "left"}
+              />
+            ))}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}