modern-cms 1.0.0

package/template/apps/web/components/renderer/sections/Footer.tsx

@@ -0,0 +1,117 @@
+import Link from "next/link";
+import { Globe, MapPin, Phone, Mail } from "lucide-react";
+import { useSiteData } from "@/components/theme/SiteDataContext";
+import type { SectionProps } from "./types";
+
+// lucide removed brand logos from the library, so social links render as simple
+// monogram badges (an original, trademark-free treatment) — the platform's initials
+// in a circle, sized to match the surrounding inline icons.
+const SOCIAL_MONOGRAMS: Record<string, string> = {
+  facebook: "f",
+  twitter: "x",
+  instagram: "ig",
+  linkedin: "in",
+  youtube: "yt",
+};
+
+function SocialBadge({ platform }: { platform: string }) {
+  const monogram = SOCIAL_MONOGRAMS[platform];
+  if (!monogram) return <Globe size={18} />;
+  return (
+    <span
+      aria-hidden
+      className="inline-flex items-center justify-center w-[18px] h-[18px] rounded-full border border-current text-[9px] font-bold leading-none lowercase"
+    >
+      {monogram}
+    </span>
+  );
+}
+
+type LinkColumn = { title: string; links: { label: string; href: string }[] };
+type ContactInfo = { address?: string; phone?: string; email?: string; extraLine?: string };
+
+export function Footer({ node }: SectionProps) {
+  const { theme } = useSiteData();
+  const text = (node.props.text as string) ?? "";
+  const description = (node.props.description as string) ?? "";
+  const socialLinks = (node.props.socialLinks as { platform: string; url: string }[]) ?? [];
+  const linkColumns = (node.props.linkColumns as LinkColumn[]) ?? [];
+  const contactInfo = (node.props.contactInfo as ContactInfo) ?? {};
+  const bottomLinks = (node.props.bottomLinks as { label: string; href: string }[]) ?? [];
+
+  const hasContactInfo = contactInfo.address || contactInfo.phone || contactInfo.email || contactInfo.extraLine;
+
+  return (
+    <div className="px-4">
+      {(description || linkColumns.length > 0 || hasContactInfo) && (
+        <div className="grid gap-10 pb-10 mb-8 border-b border-white/10" style={{ gridTemplateColumns: "2fr repeat(auto-fit, minmax(140px, 1fr))" }}>
+          <div className="space-y-3">
+            <div className="font-heading text-lg font-semibold">{theme.siteName}</div>
+            {description && <p className="text-sm opacity-70 max-w-sm">{description}</p>}
+          </div>
+          {linkColumns.map((col, i) => (
+            <div key={i} className="space-y-2">
+              <div className="text-sm font-semibold opacity-90">{col.title}</div>
+              <ul className="space-y-1.5">
+                {col.links.map((link, j) => (
+                  <li key={j}>
+                    <Link href={link.href} className="text-sm opacity-70 hover:opacity-100">
+                      {link.label}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+          {hasContactInfo && (
+            <div className="space-y-2">
+              <div className="text-sm font-semibold opacity-90">Get In Touch</div>
+              <ul className="space-y-2">
+                {contactInfo.address && (
+                  <li className="flex items-start gap-2 text-sm opacity-70">
+                    <MapPin size={14} className="mt-0.5 shrink-0" /> {contactInfo.address}
+                  </li>
+                )}
+                {contactInfo.phone && (
+                  <li className="flex items-center gap-2 text-sm opacity-70">
+                    <Phone size={14} className="shrink-0" /> {contactInfo.phone}
+                  </li>
+                )}
+                {contactInfo.email && (
+                  <li className="flex items-center gap-2 text-sm opacity-70">
+                    <Mail size={14} className="shrink-0" /> {contactInfo.email}
+                  </li>
+                )}
+                {contactInfo.extraLine && <li className="text-xs opacity-50">{contactInfo.extraLine}</li>}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+        <div className="flex flex-col md:flex-row items-center gap-3 text-center md:text-left">
+          <p className="text-sm opacity-80">{text}</p>
+          {bottomLinks.length > 0 && (
+            <div className="flex items-center gap-3 flex-wrap justify-center">
+              {bottomLinks.map((link, i) => (
+                <Link key={i} href={link.href} className="text-xs opacity-70 hover:opacity-100 underline underline-offset-2">
+                  {link.label}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+        {socialLinks.length > 0 && (
+          <div className="flex items-center gap-4">
+            {socialLinks.map((link, i) => (
+              <a key={i} href={link.url} target="_blank" rel="noreferrer" aria-label={link.platform}>
+                <SocialBadge platform={link.platform} />
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Gallery.tsx

@@ -0,0 +1,27 @@
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type GalleryImage = { src: string; alt?: string };
+
+export function Gallery({ node }: SectionProps) {
+  const images = (node.props.images as GalleryImage[]) ?? [];
+  const columns = Math.max(1, Math.min(6, Number(node.props.columns) || 3));
+
+  if (images.length === 0) {
+    return (
+      <div className="h-48 flex items-center justify-center bg-slate-100 text-slate-400 text-sm">
+        No images added yet
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+      {images.map((img, i) => (
+        <div key={i} className="relative w-full h-40 rounded-lg overflow-hidden">
+          <CmsImage src={img.src} alt={img.alt ?? ""} fill className="object-cover" sizes={`${Math.round(100 / columns)}vw`} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/GoToTop.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as LucideIcons from "lucide-react";
+import { useEffect, useState } from "react";
+import { nodeStyleToCss } from "@/lib/style";
+import type { SectionProps } from "./types";
+
+const SIZE_CLASSES = {
+  sm: "w-8 h-8 text-sm",
+  md: "w-12 h-12 text-xl",
+  lg: "w-16 h-16 text-2xl"
+} as const;
+
+export function GoToTop({ node }: SectionProps) {
+  const enabled = node.props.enabled !== false;
+  const [visible, setVisible] = useState(false);
+  const showAfterScroll = Number(node.props.showAfterScroll) || 300;
+  const iconName = (node.props.icon as string) || "ArrowUp";
+  const size = (node.props.size as keyof typeof SIZE_CLASSES) || "md";
+  const css = nodeStyleToCss(node.style, true);
+
+  const Icon = (LucideIcons as any)[iconName] || LucideIcons.ArrowUp;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleScroll = () => {
+      setVisible(window.scrollY > showAfterScroll);
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [enabled, showAfterScroll]);
+
+  const goToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  };
+
+  if (!enabled) return null;
+
+  return (
+    <button
+      onClick={goToTop}
+      className={`fixed bottom-8 right-8 z-50 flex items-center justify-center cursor-pointer transition-all duration-300 hover:scale-110 ${SIZE_CLASSES[size]} ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10 pointer-events-none"}`}
+      style={css}
+    >
+      <Icon size="1em" />
+    </button>
+  );
+}

package/template/apps/web/components/renderer/sections/Grid.tsx

@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react";
+import type { SectionProps } from "./types";
+
+/**
+ * A true 2D CSS Grid — Container/Column only ever lay out a single row of columns.
+ * Row/column counts live in props (rows/columns, adjusted via the Inspector's
+ * stepper pair, which seeds/grows the matching "gridCell" children). A cell's own
+ * span across multiple tracks is a NodeStyle field on the cell itself
+ * (gridColumnSpan/gridRowSpan — see lib/style.ts) since it has to land on that cell's
+ * own rendered element to actually affect its placement as a grid item.
+ */
+export function Grid({ node, children }: SectionProps) {
+  const rows = Math.max(1, Number(node.props.rows) || 1);
+  const columns = Math.max(1, Number(node.props.columns) || 2);
+  const gap = (node.props.gap as string) || "24px";
+  const alignItems = node.style.alignItems || undefined;
+  const justifyContent = node.style.justifyContent === "between" ? "space-between" : node.style.justifyContent || undefined;
+
+  // Per-track sizes (see setGridTrackSize) — dragging a cell's resize handle sets the
+  // specific column/row track it belongs to, same as resizing a column in a
+  // spreadsheet. Missing/short arrays fall back to the original even-split behavior.
+  const columnTracks = Array.isArray(node.props.columnTracks) ? (node.props.columnTracks as string[]) : [];
+  const rowTracks = Array.isArray(node.props.rowTracks) ? (node.props.rowTracks as string[]) : [];
+  const gridTemplateColumns = Array.from({ length: columns }, (_, i) => columnTracks[i] || "minmax(0, 1fr)").join(" ");
+  const gridTemplateRows = Array.from({ length: rows }, (_, i) => rowTracks[i] || "minmax(80px, auto)").join(" ");
+
+  return (
+    <div
+      className="grid"
+      style={
+        {
+          gridTemplateColumns,
+          gridTemplateRows,
+          gap,
+          // Governs how each cell's own section sizes/sits within its row (a section
+          // shorter than the row when alignItems isn't "stretch").
+          alignItems,
+          justifyContent,
+          // The same choice ALSO cascades into every cell's own inner content
+          // alignment (see GridCell.tsx) via inherited CSS custom properties — custom
+          // properties pass straight through a grid item's box to its descendants, so
+          // this reaches each cell without the Grid needing to know its children. A
+          // cell can still override just itself from its own Style tab. Defaults
+          // match the pre-existing unset look (full-width content, top-anchored)
+          // rather than the CSS spec defaults for these vars' *own* initial values.
+          "--pgcms-grid-align-items": alignItems ?? "stretch",
+          "--pgcms-grid-justify-content": justifyContent ?? "start",
+        } as CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/GridCell.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from "react";
+import type { SectionProps } from "./types";
+
+/**
+ * One slot of a parent Grid. The cell's span across the parent's tracks is applied to
+ * its own outer element via NodeStyle (gridColumnSpan/gridRowSpan → nodeStyleToCss),
+ * not here, since a grid item's placement is controlled by properties on the item
+ * itself, not its children.
+ *
+ * Content alignment falls back to the parent Grid's own choice (via the
+ * --pgcms-grid-align-items/-justify-content custom properties it sets — see Grid.tsx)
+ * whenever this cell hasn't set its own explicit alignment, so choosing an alignment
+ * once on the Grid applies uniformly to every cell instead of requiring each one
+ * configured individually. The var() fallbacks (stretch/start) only matter if a cell
+ * somehow renders outside a Grid — normally the parent always provides the vars.
+ */
+export function GridCell({ node, children }: SectionProps) {
+  const justifyContent = node.style.justifyContent
+    ? node.style.justifyContent === "between"
+      ? "space-between"
+      : node.style.justifyContent
+    : "var(--pgcms-grid-justify-content, start)";
+  const alignItems = node.style.alignItems || "var(--pgcms-grid-align-items, stretch)";
+
+  return (
+    <div
+      className="flex flex-col gap-4 min-h-[40px] h-full"
+      style={{ justifyContent, alignItems } as CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Header.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Menu, X, ChevronDown } from "lucide-react";
+import { buildNavTree } from "@pgcms/shared";
+import { useSiteData } from "@/components/theme/SiteDataContext";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+export function Header({ node, children }: SectionProps) {
+  const sticky = node.props.sticky !== false;
+  const hasZones = node.children.length > 0;
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    if (!sticky) return;
+    const onScroll = () => setScrolled(window.scrollY > 8);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [sticky]);
+
+  return (
+    // Stickiness itself is applied by the Renderer to the section element — an inner
+    // sticky div can't work (its containing block is the section, exactly its own
+    // height). This component only adds the scrolled-state shadow.
+    <div>
+      <div
+        className={`px-4 py-4 transition-all duration-200 ${sticky && scrolled ? "shadow-md" : ""}`}
+      >
+        {hasZones ? (
+          <div className="flex items-center justify-between gap-4 flex-wrap">
+            {children}
+          </div>
+        ) : (
+          <LegacyHeader />
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Headers saved before left/center/right zones existed have no children — keep them
+ * rendering exactly as before instead of going blank. New headers use the zone layout. */
+function LegacyHeader() {
+  const { theme, navItems } = useSiteData();
+  const [open, setOpen] = useState(false);
+  const items = buildNavTree(navItems);
+
+  return (
+    <div className="relative flex items-center justify-between">
+      <div className="flex items-center gap-2 font-heading text-lg font-semibold">
+        {theme.logoUrl ? (
+          <CmsImage src={theme.logoUrl} alt={theme.siteName} width={200} height={64} className="h-8 w-auto" style={{ height: "2rem", width: "auto" }} />
+        ) : (
+          <span>{theme.siteName}</span>
+        )}
+      </div>
+      <nav className="hidden md:flex items-center gap-6">
+        {items.map((item) =>
+          item.children.length > 0 ? (
+            <div key={item.id} className="relative group">
+              <Link
+                href={item.href}
+                className="flex items-center gap-1 text-sm font-medium hover:opacity-70 py-2"
+              >
+                {item.label}
+                <ChevronDown size={14} />
+              </Link>
+              <div
+                className="absolute left-0 top-full min-w-[180px] rounded-md border bg-white text-slate-900 shadow-lg py-1.5 z-40
+                           opacity-0 invisible translate-y-1 transition-all duration-150
+                           group-hover:opacity-100 group-hover:visible group-hover:translate-y-0
+                           group-focus-within:opacity-100 group-focus-within:visible group-focus-within:translate-y-0"
+              >
+                {item.children.map((child) => (
+                  <Link
+                    key={child.id}
+                    href={child.href}
+                    className="block px-4 py-2 text-sm hover:bg-slate-50 whitespace-nowrap"
+                  >
+                    {child.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <Link
+              key={item.id}
+              href={item.href}
+              className="text-sm font-medium hover:opacity-70"
+            >
+              {item.label}
+            </Link>
+          ),
+        )}
+      </nav>
+      <button
+        className="md:hidden"
+        onClick={() => setOpen(!open)}
+        aria-label="Toggle menu"
+      >
+        {open ? <X size={22} /> : <Menu size={22} />}
+      </button>
+      {open && (
+        <nav className="md:hidden absolute left-0 right-0 top-full bg-inherit flex flex-col gap-1 px-4 pb-4">
+          {items.map((item) => (
+            <div key={item.id} className="flex flex-col">
+              <Link href={item.href} className="text-sm font-medium py-2">
+                {item.label}
+              </Link>
+              {item.children.length > 0 && (
+                <div className="flex flex-col pl-4 border-l ml-1">
+                  {item.children.map((child) => (
+                    <Link
+                      key={child.id}
+                      href={child.href}
+                      className="text-sm py-1.5 opacity-80"
+                    >
+                      {child.label}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </nav>
+      )}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/Hero.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useRef } from "react";
+import { Button } from "@/components/renderer/sections/Button";
+import { useThreeBackgroundScene, type ThreeBackgroundPreset } from "@/lib/threeBackgroundScene";
+import type { SectionProps } from "./types";
+
+const THREE_PRESETS = new Set(["particles", "waves", "shapes", "stars", "network", "rings"]);
+
+export function Hero({ node, children }: SectionProps) {
+  const { heading, subheading, primaryButtonText, primaryButtonHref, secondaryButtonText, secondaryButtonHref } =
+    node.props as Record<string, string>;
+  // A separate on/off switch rather than folding "off" into the preset list — flipping
+  // this back on always restores whichever style/colors/speed were last configured,
+  // instead of losing them the moment "None" was picked.
+  const enabled = node.props.backgroundAnimationEnabled === true;
+  const preset = (node.props.preset as string) || "gradient";
+  const accentColor = (node.props.accentColor as string) || "#60a5fa";
+  const secondColor = (node.props.secondColor as string) || "#0f172a";
+  const gradientAngle = Number(node.props.gradientAngle) || 135;
+  const gradientAnimated = node.props.gradientAnimated === true;
+  const density = Number(node.props.density) || 80;
+  const speed = Number(node.props.speed) || 1;
+  const mouseFollow = node.props.mouseFollow === true;
+  const bgOpacity = node.props.bgOpacity !== undefined ? Number(node.props.bgOpacity) : 1;
+  const is3D = enabled && THREE_PRESETS.has(preset);
+  const isGradient = enabled && preset === "gradient";
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  useThreeBackgroundScene(canvasRef, containerRef, is3D, {
+    preset: (is3D ? preset : "particles") as ThreeBackgroundPreset,
+    color: accentColor,
+    secondColor,
+    density,
+    speed,
+    mouseFollow,
+  });
+
+  return (
+    <div ref={containerRef} className="relative flex flex-col items-center gap-6 overflow-hidden h-full min-h-[inherit]">
+      {isGradient && (
+        <div
+          className={gradientAnimated ? "absolute inset-0 pgcms-animated-gradient" : "absolute inset-0"}
+          style={{
+            // The animated variant needs a third stop so the drifting background-position
+            // has somewhere to travel — A → B → A reads as a continuous color sweep.
+            background: gradientAnimated
+              ? `linear-gradient(${gradientAngle}deg, ${accentColor}, ${secondColor}, ${accentColor})`
+              : `linear-gradient(${gradientAngle}deg, ${accentColor}, ${secondColor})`,
+            opacity: bgOpacity,
+          }}
+        />
+      )}
+      {is3D && <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ opacity: bgOpacity }} />}
+      <div className="relative z-10 flex flex-col items-center gap-6">
+        {heading && <h1 className="text-4xl md:text-5xl font-bold">{heading}</h1>}
+        {subheading && <p className="text-lg opacity-90">{subheading}</p>}
+        {(primaryButtonText || secondaryButtonText) && (
+          <div className="flex flex-wrap gap-4 justify-center mt-2">
+            {primaryButtonText && (
+              <Button text={primaryButtonText} href={primaryButtonHref || "#"} variant="primary" />
+            )}
+            {secondaryButtonText && (
+              <Button text={secondaryButtonText} href={secondaryButtonHref || "#"} variant="outline" />
+            )}
+          </div>
+        )}
+        {children && <div className="w-full">{children}</div>}
+      </div>
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/ImageBackgroundSection.tsx

@@ -0,0 +1,20 @@
+import { Button } from "./Button";
+import type { SectionProps } from "./types";
+
+/** The overlay layer now renders universally for every node type (see
+ * NodeBackgroundLayers) and the image itself is plain CSS background — this component
+ * only lays out the built-in content and any child components dropped in. */
+export function ImageBackgroundSection({ node, children }: SectionProps) {
+  const { heading, subheading, buttonText, buttonHref } = node.props as Record<string, string>;
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full min-h-[inherit] text-center gap-4">
+      <div className="flex flex-col items-center gap-4 max-w-2xl mx-auto">
+        {heading && <h2 className="text-3xl md:text-4xl font-bold">{heading}</h2>}
+        {subheading && <p className="text-lg opacity-90">{subheading}</p>}
+        {buttonText && <Button text={buttonText} href={buttonHref || "#"} variant="primary" />}
+      </div>
+      {children && <div className="w-full">{children}</div>}
+    </div>
+  );
+}

package/template/apps/web/components/renderer/sections/ImageBlock.tsx

@@ -0,0 +1,55 @@
+import Image from "next/image";
+import type { SectionProps } from "./types";
+
+export function ImageBlock({ node }: SectionProps) {
+  const src = (node.props.src as string) ?? "";
+  const alt = (node.props.alt as string) ?? "";
+  const caption = (node.props.caption as string) ?? "";
+  const imgWidth = (node.props.imgWidth as string) || undefined;
+  const imgHeight = (node.props.imgHeight as string) || undefined;
+  const align = (node.props.align as string) || "center";
+
+  if (!src) {
+    return (
+      <div className="h-64 flex items-center justify-center bg-slate-100 text-slate-400 text-sm">
+        No image selected
+      </div>
+    );
+  }
+
+  const useOptimized = src.startsWith("http://") || src.startsWith("https://") || src.startsWith("/");
+
+  return (
+    <figure className={align === "center" ? "flex flex-col items-center" : align === "right" ? "flex flex-col items-end" : "flex flex-col items-start"}>
+      {useOptimized ? (
+        <Image
+          src={src}
+          alt={alt}
+          width={1200}
+          height={800}
+          className="rounded-lg max-w-full h-auto"
+          style={{
+            width: imgWidth || "100%",
+            height: imgHeight || "auto",
+            maxWidth: "100%",
+            objectFit: imgHeight ? "cover" : undefined,
+          }}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
+        />
+      ) : (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={src}
+          alt={alt}
+          className="rounded-lg max-w-full"
+          style={{
+            width: imgWidth || "100%",
+            height: imgHeight || "auto",
+            objectFit: imgHeight ? "cover" : undefined,
+          }}
+        />
+      )}
+      {caption && <figcaption className="text-sm opacity-70 mt-2 text-center">{caption}</figcaption>}
+    </figure>
+  );
+}

package/template/apps/web/components/renderer/sections/LanguageSwitcher.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import Link from "next/link";
+import { Languages } from "lucide-react";
+import { SUPPORTED_LOCALES } from "@pgcms/shared";
+import { useSiteData } from "@/components/theme/SiteDataContext";
+import type { SectionProps } from "./types";
+
+/** Lists the current page's translation group as links — the group is resolved
+ * server-side per page and provided through SiteDataContext, so this component has
+ * no props to configure beyond appearance. */
+export function LanguageSwitcher({ node }: SectionProps) {
+  const { pageLocale, translations } = useSiteData();
+  const compact = node.props.compact === true;
+  const items = translations ?? [];
+
+  if (items.length === 0) {
+    return (
+      <div className="text-xs opacity-60 flex items-center gap-1.5 justify-center">
+        <Languages size={14} /> No translations linked to this page yet
+      </div>
+    );
+  }
+
+  function labelFor(locale: string) {
+    return SUPPORTED_LOCALES.find((l) => l.code === locale)?.label ?? locale;
+  }
+
+  return (
+    <nav className="flex items-center gap-2 justify-center flex-wrap" aria-label="Page language">
+      <Languages size={16} className="opacity-60" />
+      {items.map((t) => {
+        const active = t.locale === pageLocale;
+        return (
+          <Link
+            key={t.locale}
+            href={`/${t.slug}`}
+            hrefLang={t.locale}
+            className={
+              active
+                ? "text-sm font-semibold underline underline-offset-4"
+                : "text-sm opacity-70 hover:opacity-100"
+            }
+          >
+            {compact ? t.locale.toUpperCase() : labelFor(t.locale)}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

package/template/apps/web/components/renderer/sections/Logo.tsx

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { useSiteData } from "@/components/theme/SiteDataContext";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+export function Logo({ node }: SectionProps) {
+  const { theme } = useSiteData();
+  const useSiteLogo = node.props.useSiteLogo !== false;
+  const customImage = node.props.customImage as string;
+  const href = (node.props.href as string) || "/";
+  const height = (node.props.height as string) || "36px";
+
+  const src = useSiteLogo ? theme.logoUrl : customImage || theme.logoUrl;
+
+  return (
+    <Link href={href} className="inline-flex items-center font-heading text-lg font-semibold shrink-0">
+      {src ? (
+        <CmsImage src={src} alt={theme.siteName} width={240} height={80} style={{ height, width: "auto" }} />
+      ) : (
+        <span>{theme.siteName}</span>
+      )}
+    </Link>
+  );
+}