@bygghammar/cms-platform 0.1.0

package/src/blocks/components/ChecklistBlock.tsx

@@ -0,0 +1,68 @@
+import { Check } from "lucide-react";
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import type { ChecklistProps } from "../types";
+
+/** Column(s) of localized checkmark lists — e.g. "What's included" / "Extra perks". */
+export function ChecklistBlock({ props }: { props: ChecklistProps }) {
+  const { t } = useT();
+  const columns = props.columns ?? [];
+  const tone = props.tone === "paper" ? "bg-paper" : "bg-white";
+
+  return (
+    <section className={`${tone} py-20 md:py-28`}>
+      <div className="container-editorial">
+        {(props.eyebrow || props.title) && (
+          <Reveal>
+            <div className="max-w-3xl">
+              {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}
+            </div>
+          </Reveal>
+        )}
+
+        <div
+          className={`mt-12 md:mt-16 grid gap-8 md:gap-10 ${
+            columns.length > 1 ? "md:grid-cols-2" : "max-w-2xl"
+          }`}
+        >
+          {columns.map((col, ci) => (
+            <Reveal key={col.id ?? ci} delay={ci * 90}>
+              <div className="h-full border border-ink/10 bg-paper/60 p-7 md:p-9">
+                {col.title ? (
+                  <h3 className="font-serif text-xl md:text-2xl text-ink whitespace-pre-line">
+                    {t(col.title)}
+                  </h3>
+                ) : null}
+                <ul className="mt-5 space-y-3">
+                  {(col.entries ?? []).map((e, i) => (
+                    <li key={e.id ?? i} className="flex items-start gap-3">
+                      <Check className="mt-1 size-4 shrink-0 text-sea" aria-hidden />
+                      <span className="leading-relaxed text-ink/85">{t(e.text)}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Reveal>
+          ))}
+        </div>
+
+        {props.note ? (
+          <Reveal>
+            <p className="mt-8 max-w-3xl text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+              {t(props.note)}
+            </p>
+          </Reveal>
+        ) : null}
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/CtaBannerBlock.tsx

@@ -0,0 +1,65 @@
+import { ArrowRight } from "lucide-react";
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import type { CtaBannerProps } from "../types";
+
+/** Localized call-to-action banner with up to two links. */
+export function CtaBannerBlock({ props }: { props: CtaBannerProps }) {
+  const { t } = useT();
+  const tone = props.tone ?? "ink";
+  const dark = tone === "ink";
+  const bg = dark ? "bg-ink text-paper" : tone === "sea" ? "bg-ice text-ink" : "bg-paper text-ink";
+  const muted = dark ? "text-paper/80" : "text-ink/75";
+  const eyebrowTone = dark ? "text-paper/75" : "text-ink/70";
+  const primary = dark
+    ? "bg-paper text-ink hover:bg-sea"
+    : "bg-ink text-paper hover:bg-ink/85";
+  const secondary = dark
+    ? "border border-paper/60 text-paper hover:bg-paper hover:text-ink"
+    : "border border-ink/30 text-ink hover:bg-ink hover:text-paper";
+
+  const links = [
+    { cta: props.cta, className: primary },
+    { cta: props.secondaryCta, className: secondary },
+  ].filter((l) => l.cta?.href || l.cta?.label);
+
+  return (
+    <section className={`${bg} py-20 md:py-28`}>
+      <div className="container-editorial">
+        <Reveal>
+          <div className="max-w-3xl">
+            {props.eyebrow ? (
+              <span className={`text-[0.7rem] uppercase tracking-[0.22em] ${eyebrowTone}`}>
+                {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] whitespace-pre-line">
+                {t(props.title)}
+              </h2>
+            ) : null}
+            {props.body ? (
+              <p className={`mt-5 text-base md:text-lg leading-relaxed whitespace-pre-line ${muted}`}>
+                {t(props.body)}
+              </p>
+            ) : null}
+            {links.length > 0 && (
+              <div className="mt-9 flex flex-wrap items-center gap-3">
+                {links.map((l, i) => (
+                  <a
+                    key={i}
+                    href={l.cta?.href || "#"}
+                    className={`inline-flex items-center gap-2 px-7 py-4 text-xs uppercase tracking-[0.22em] transition-colors ${l.className}`}
+                  >
+                    {t(l.cta?.label)}
+                    <ArrowRight className="size-4" />
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/FaqBlock.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { Plus, Minus } from "lucide-react";
+import { useT } from "../../i18n";
+import type { FaqProps } from "../types";
+
+const COLS: Record<number, string> = {
+  1: "",
+  2: "md:grid md:grid-cols-2 md:gap-x-10",
+  3: "md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-x-10",
+};
+
+export function FaqBlock({ props }: { props: FaqProps }) {
+  const { t } = useT();
+  const [openId, setOpenId] = useState<string | null>(null);
+  const items = props.items ?? [];
+  const columns = props.columns ?? 1;
+  const wide = columns > 1;
+  return (
+    <section className="bg-white py-24 md:py-32">
+      <div className={wide ? "container-editorial" : "mx-auto max-w-3xl px-6"}>
+        {props.title ? (
+          <h2 className="font-serif text-3xl md:text-5xl text-ink mb-10 md:mb-14 whitespace-pre-line">
+            {t(props.title)}
+          </h2>
+        ) : null}
+        <ul className={`border-t border-ink/10 ${COLS[columns] ?? ""}`}>
+          {items.map((item) => {
+            const isOpen = openId === item.id;
+            return (
+              <li key={item.id} className="border-b border-ink/10">
+                <button
+                  type="button"
+                  className="w-full flex items-center justify-between gap-6 py-6 text-left"
+                  onClick={() => setOpenId(isOpen ? null : item.id)}
+                  aria-expanded={isOpen}
+                >
+                  <span className="font-serif text-lg md:text-xl text-ink">
+                    {t(item.q)}
+                  </span>
+                  <span className="shrink-0 flex size-9 items-center justify-center border border-ink/20 text-ink transition-colors group-hover:border-sea">
+                    {isOpen ? <Minus className="size-4" /> : <Plus className="size-4" />}
+                  </span>
+                </button>
+                <div
+                  className={`grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out ${
+                    isOpen ? "grid-rows-[1fr] pb-6" : "grid-rows-[0fr]"
+                  }`}
+                >
+                  <div className="min-h-0">
+                    <p className="text-ink/70 leading-relaxed whitespace-pre-line">
+                      {t(item.a)}
+                    </p>
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </section>
+  );
+}

package/src/blocks/components/HeroFullBlock.tsx

@@ -0,0 +1,201 @@
+import { ArrowRight, ChevronDown } from "lucide-react";
+import { useT } from "../../i18n";
+import { FocalImage } from "../../host";
+import { LazyVideo } from "../../host";
+import type { HeroFullProps } from "../types";
+
+const HEIGHTS: Record<NonNullable<HeroFullProps["height"]>, string> = {
+  full: "min-h-[100svh]",
+  tall: "min-h-[85svh]",
+  medium: "min-h-[65svh]",
+  compact: "min-h-[50svh]",
+};
+
+const TITLE_SIZES: Record<NonNullable<HeroFullProps["titleSize"]>, string> = {
+  sm: "text-[clamp(1.6rem,5vw,2.5rem)]",
+  md: "text-[clamp(2rem,6vw,3.5rem)]",
+  lg: "text-[clamp(2.4rem,7.5vw,4.75rem)]",
+  xl: "text-[clamp(2.8rem,9vw,6.5rem)]",
+};
+
+const WIDTHS: Record<NonNullable<HeroFullProps["contentWidth"]>, string> = {
+  narrow: "max-w-xl",
+  normal: "max-w-3xl",
+  wide: "max-w-5xl",
+  full: "max-w-none",
+};
+
+const OVERLAYS: Record<NonNullable<HeroFullProps["overlay"]>, string> = {
+  none: "",
+  light: "bg-black/20",
+  medium: "bg-black/40",
+  strong: "bg-black/60",
+  bottom: "bg-gradient-to-t from-black/80 via-black/25 to-transparent",
+  top: "bg-gradient-to-b from-black/75 via-black/20 to-transparent",
+  side: "bg-gradient-to-r from-black/75 via-black/25 to-transparent",
+};
+
+/**
+ * Fullscreen hero with an image or video background and highly configurable
+ * overlay text. Mobile-first: separate mobile media, fluid type, safe padding.
+ */
+export function HeroFullBlock({ props: p }: { props: HeroFullProps }) {
+  const { t } = useT();
+
+  const align = p.textAlign ?? "left";
+  const vertical = p.verticalAlign ?? "center";
+  const dark = (p.textTone ?? "light") === "light";
+  const mediaType = p.mediaType ?? "image";
+
+  const image = p.image;
+  const imageMobile = p.imageMobile || image;
+  const videoSrc = p.videoSrc;
+  const videoSrcMobile = p.videoSrcMobile || videoSrc;
+  const videoSrcWebm = p.videoSrcWebm;
+  const videoSrcWebmMobile = p.videoSrcWebmMobile || videoSrcWebm;
+  const poster = p.posterSrc;
+  const posterMobile = p.posterSrcMobile || poster;
+
+  const alignClass =
+    align === "center" ? "items-center text-center" : align === "right" ? "items-end text-right" : "items-start text-left";
+  const rowClass =
+    align === "center" ? "justify-center" : align === "right" ? "justify-end" : "justify-start";
+  const colClass =
+    vertical === "top" ? "justify-start pt-28 md:pt-36" : vertical === "bottom" ? "justify-end pb-20 md:pb-28" : "justify-center";
+
+  const textColor = dark ? "text-white" : "text-ink";
+  const mutedColor = dark ? "text-white/80" : "text-ink/70";
+  const eyebrowColor = dark ? "text-white/75" : "text-ink/65";
+
+  const primaryBtn = dark
+    ? "bg-white text-ink hover:bg-sea hover:text-white"
+    : "bg-ink text-paper hover:bg-ink/85";
+  const secondaryBtn = dark
+    ? "border border-white/65 text-white hover:bg-white hover:text-ink"
+    : "border border-ink/30 text-ink hover:bg-ink hover:text-paper";
+
+  const ctas = [
+    { cta: p.primaryCta, className: primaryBtn },
+    { cta: p.secondaryCta, className: secondaryBtn },
+  ].filter((c) => c.cta?.href || (c.cta?.label && Object.keys(c.cta.label).length));
+
+  return (
+    <section
+      id={p.anchor || undefined}
+      className={`relative isolate w-full overflow-hidden bg-ink ${HEIGHTS[p.height ?? "full"]} flex`}
+    >
+      {/* Background media */}
+      <div className="absolute inset-0 -z-10">
+        {mediaType === "video" && videoSrc ? (
+          <>
+            {/* Only the element that is actually displayed intersects the
+                viewport, so exactly one video is ever fetched. */}
+            <LazyVideo
+              key={`desktop:${videoSrc}`}
+              className="hidden size-full object-cover md:block"
+              src={videoSrc}
+              sources={
+                videoSrcWebm
+                  ? [
+                      { src: videoSrcWebm, type: "video/webm" },
+                      { src: videoSrc, type: "video/mp4" },
+                    ]
+                  : undefined
+              }
+              poster={poster || undefined}
+              autoPlay={p.videoAutoplay !== false}
+              loop={p.videoLoop !== false}
+              muted={p.videoMuted !== false}
+              preload="metadata"
+            />
+            <LazyVideo
+              key={`mobile:${videoSrcMobile}`}
+              className="size-full object-cover md:hidden"
+              src={videoSrcMobile}
+              sources={
+                videoSrcWebmMobile && videoSrcMobile
+                  ? [
+                      { src: videoSrcWebmMobile, type: "video/webm" },
+                      { src: videoSrcMobile, type: "video/mp4" },
+                    ]
+                  : undefined
+              }
+              poster={posterMobile || undefined}
+              autoPlay={p.videoAutoplay !== false}
+              loop={p.videoLoop !== false}
+              muted={p.videoMuted !== false}
+              preload="metadata"
+            />
+          </>
+        ) : image || imageMobile ? (
+          <>
+            {image ? (
+              <FocalImage
+                src={image}
+                alt={t(p.imageAlt) || ""}
+                sizes="100vw"
+                className="hidden size-full object-cover md:block"
+              />
+            ) : null}
+            {imageMobile ? (
+              <FocalImage
+                src={imageMobile}
+                alt={t(p.imageAlt) || ""}
+                sizes="100vw"
+                className="size-full object-cover md:hidden"
+              />
+            ) : null}
+          </>
+        ) : null}
+        <div className={`absolute inset-0 ${OVERLAYS[p.overlay ?? "medium"]}`} />
+      </div>
+
+      {/* Content */}
+      <div className={`container-editorial flex w-full flex-col ${colClass}`}>
+        <div className={`flex w-full ${rowClass}`}>
+          <div className={`flex w-full flex-col ${alignClass} ${WIDTHS[p.contentWidth ?? "normal"]} ${textColor}`}>
+            {p.eyebrow ? (
+              <span className={`text-[0.65rem] uppercase tracking-[0.3em] md:text-[0.72rem] ${eyebrowColor}`}>
+                {t(p.eyebrow)}
+              </span>
+            ) : null}
+            {p.title ? (
+              <h1
+                className={`mt-4 ${TITLE_SIZES[p.titleSize ?? "lg"]} leading-[1.02] tracking-[-0.02em] ${
+                  (p.titleFont ?? "serif") === "serif" ? "font-serif" : "font-sans font-semibold"
+                } ${p.titleUppercase ? "uppercase tracking-[0.04em]" : ""} whitespace-pre-line`}
+              >
+                {t(p.title)}
+              </h1>
+            ) : null}
+            {p.body ? (
+              <p className={`mt-5 whitespace-pre-line text-base leading-relaxed md:text-lg ${mutedColor} ${WIDTHS[p.contentWidth ?? "normal"] === "max-w-none" ? "" : ""}`}>
+                {t(p.body)}
+              </p>
+            ) : null}
+            {ctas.length > 0 && (
+              <div className={`mt-8 flex flex-wrap gap-3 ${rowClass}`}>
+                {ctas.map((c, i) => (
+                  <a
+                    key={i}
+                    href={c.cta?.href || "#"}
+                    className={`inline-flex items-center gap-2 px-6 py-3.5 text-[0.7rem] uppercase tracking-[0.22em] transition-colors md:px-8 md:py-4 md:text-xs ${c.className}`}
+                  >
+                    {t(c.cta?.label)}
+                    <ArrowRight className="size-4" />
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {p.showScrollCue ? (
+        <div className={`pointer-events-none absolute inset-x-0 bottom-6 flex justify-center ${dark ? "text-white/70" : "text-ink/50"}`}>
+          <ChevronDown className="size-6 animate-bounce" />
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/src/blocks/components/IconGridBlock.tsx

@@ -0,0 +1,125 @@
+import { useT } from "../../i18n";
+import { Reveal } from "../../ui/Reveal";
+import { resolveBlockIcon } from "../icons";
+import type { IconGridProps } from "../types";
+
+const COLS: Record<number, string> = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4",
+  5: "sm:grid-cols-2 lg:grid-cols-5",
+};
+
+const TONE: Record<string, string> = {
+  white: "bg-white",
+  paper: "bg-paper",
+  ice: "bg-ice",
+};
+
+/**
+ * Icon cards: icon + title + optional meta (e.g. price) and body text.
+ * One column on mobile, configurable 2–5 columns from `sm:`/`lg:` up.
+ */
+export function IconGridBlock({ props }: { props: IconGridProps }) {
+  const { t } = useT();
+  const items = props.items ?? [];
+  const tone = TONE[props.tone ?? "white"] ?? "bg-white";
+  const cols = COLS[props.columns ?? 3] ?? COLS[3];
+  const bare = props.cardStyle === "bare";
+  const plainIcon = props.iconStyle === "plain";
+  const iconAlign = props.iconAlign ?? "center";
+  const iconAlignClass =
+    iconAlign === "left" ? "self-start" : iconAlign === "right" ? "self-end" : "self-center";
+  const textAlignClass =
+    iconAlign === "left" ? "text-left" : iconAlign === "right" ? "text-right" : "text-center";
+
+  return (
+    <section id={props.anchor || undefined} className={`${tone} py-20 md:py-28`}>
+      <div className="container-editorial">
+        {(props.eyebrow || props.title || props.lead) && (
+          <Reveal>
+            <div className="max-w-3xl">
+              {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-5 max-w-2xl text-base md:text-lg leading-relaxed text-ink/75 whitespace-pre-line">
+                  {t(props.lead)}
+                </p>
+              ) : null}
+            </div>
+          </Reveal>
+        )}
+
+        <div
+          className={`mt-12 md:mt-16 grid grid-cols-1 ${cols} ${
+            bare ? "gap-8 md:gap-10" : "gap-px bg-ink/10"
+          }`}
+        >
+
+          {items.map((item, i) => {
+            const Icon = resolveBlockIcon(item.icon);
+            const inner = (
+              <>
+                <span
+                  className={`${iconAlignClass} ${
+                    plainIcon
+                      ? "inline-flex text-sea"
+                      : "inline-flex size-11 shrink-0 items-center justify-center rounded-full border border-sea/35 bg-sea/10 text-sea"
+                  }`}
+                  aria-hidden
+                >
+                  <Icon className="size-5" strokeWidth={1.5} />
+                </span>
+                <div className="mt-5 min-w-0">
+                  <h3 className="font-serif text-lg md:text-xl leading-snug text-ink whitespace-pre-line">
+                    {item.title ? t(item.title) : null}
+                  </h3>
+                  {item.meta ? (
+                    <div className="mt-1.5 text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                      {t(item.meta)}
+                    </div>
+                  ) : null}
+                  {item.body ? (
+                    <p className="mt-3 text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+                      {t(item.body)}
+                    </p>
+                  ) : null}
+                </div>
+              </>
+            );
+            const cls = bare
+              ? `flex h-full flex-col ${textAlignClass}`
+              : `flex h-full flex-col p-7 md:p-8 ${tone} ${textAlignClass} transition-colors hover:bg-ice/40`;
+            return (
+              <Reveal key={item.id ?? i} delay={i * 50}>
+                {item.href ? (
+                  <a href={item.href} className={`${cls} group`}>
+                    {inner}
+                  </a>
+                ) : (
+                  <div className={cls}>{inner}</div>
+                )}
+              </Reveal>
+            );
+          })}
+        </div>
+
+        {props.note ? (
+          <Reveal>
+            <p className="mt-8 max-w-3xl text-sm leading-relaxed text-ink/70 whitespace-pre-line">
+              {t(props.note)}
+            </p>
+          </Reveal>
+        ) : null}
+      </div>
+    </section>
+  );
+}