modern-cms 1.0.0

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

@@ -0,0 +1,67 @@
+import type { CSSProperties } from "react";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type Logo = { image?: string; name?: string; href?: string };
+
+function LogoImage({ logo, grayscale }: { logo: Logo; grayscale: boolean }) {
+  if (!logo.image) return null;
+  const img = (
+    <div className="relative h-10 w-28 shrink-0">
+      <CmsImage
+        src={logo.image}
+        alt={logo.name ?? ""}
+        fill
+        className={`object-contain transition-all ${grayscale ? "grayscale opacity-60 hover:grayscale-0 hover:opacity-100" : ""}`}
+      />
+    </div>
+  );
+  return logo.href ? (
+    <a href={logo.href} target="_blank" rel="noopener noreferrer">
+      {img}
+    </a>
+  ) : (
+    img
+  );
+}
+
+// The static-grid sibling of Marquee — a plain, evenly spaced row/wrap of partner
+// logos. The "scroll" layout reuses Marquee's own .pgcms-marquee CSS (globals.css)
+// rather than duplicating the keyframe animation.
+export function LogoCloud({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const logos = (node.props.logos as Logo[]) ?? [];
+  const layout = (node.props.layout as string) || "grid";
+  const grayscale = node.props.grayscale !== false;
+
+  if (logos.length === 0) return null;
+
+  return (
+    <div>
+      {heading && <p className="text-sm font-medium uppercase tracking-wide opacity-60 text-center mb-6">{heading}</p>}
+      {layout === "scroll" ? (
+        <div className="pgcms-marquee">
+          <div
+            className="pgcms-marquee-track gap-12 pr-12"
+            data-pause-on-hover="true"
+            style={{ "--pgcms-marquee-duration": "24s", "--pgcms-marquee-direction": "normal" } as CSSProperties}
+          >
+            {[0, 1].map((copy) => (
+              <div key={copy} className="inline-flex items-center gap-12" aria-hidden={copy === 1}>
+                {logos.map((logo, i) => (
+                  <LogoImage key={i} logo={logo} grayscale={grayscale} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center justify-center gap-10">
+          {logos.map((logo, i) => (
+            <LogoImage key={i} logo={logo} grayscale={grayscale} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+import type { SectionProps } from "./types";
+
+export function MapEmbed({ node }: SectionProps) {
+  const lat = Number(node.props.lat) || 0;
+  const lng = Number(node.props.lng) || 0;
+  const zoom = Number(node.props.zoom) || 13;
+  const customEmbedUrl = node.props.embedUrl as string;
+
+  const src =
+    customEmbedUrl ||
+    `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.05}%2C${lat - 0.03}%2C${lng + 0.05}%2C${
+      lat + 0.03
+    }&layer=mapnik&marker=${lat}%2C${lng}&zoom=${zoom}`;
+
+  return (
+    <iframe
+      src={src}
+      className="w-full h-full min-h-[inherit] border-0"
+      style={{ minHeight: "400px" }}
+      loading="lazy"
+      title="Map"
+    />
+  );
+}

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

@@ -0,0 +1,45 @@
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type MarqueeItem = { text?: string; image?: string };
+
+export function Marquee({ node }: SectionProps) {
+  const items = (node.props.items as MarqueeItem[]) ?? [];
+  const speed = Math.max(4, Number(node.props.speed) || 20);
+  const direction = (node.props.direction as string) === "right" ? "reverse" : "normal";
+  const pauseOnHover = node.props.pauseOnHover !== false;
+
+  if (items.length === 0) return null;
+
+  // Two copies of the item list; the track translates by -50% and loops seamlessly.
+  const copies = [0, 1];
+
+  return (
+    <div className="pgcms-marquee">
+      <div
+        className="pgcms-marquee-track gap-12 pr-12"
+        data-pause-on-hover={pauseOnHover}
+        style={
+          {
+            "--pgcms-marquee-duration": `${speed}s`,
+            "--pgcms-marquee-direction": direction,
+          } as React.CSSProperties
+        }
+      >
+        {copies.map((copy) => (
+          <div key={copy} className="inline-flex items-center gap-12" aria-hidden={copy === 1}>
+            {items.map((item, i) =>
+              item.image ? (
+                <CmsImage key={i} src={item.image} alt={item.text ?? ""} width={160} height={40} className="h-10 w-auto opacity-80" style={{ height: "2.5rem", width: "auto" }} />
+              ) : (
+                <span key={i} className="text-lg font-semibold opacity-70 whitespace-nowrap">
+                  {item.text}
+                </span>
+              )
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import Link from "next/link";
+import { ChevronDown } from "lucide-react";
+import { buildNavTree } from "@pgcms/shared";
+import { useSiteData } from "@/components/theme/SiteDataContext";
+import type { SectionProps } from "./types";
+
+type CustomLink = { label: string; href: string };
+
+export function NavLinks({ node }: SectionProps) {
+  const { navItems } = useSiteData();
+  const useSiteNavigation = node.props.useSiteNavigation !== false;
+  const customLinks = (node.props.links as CustomLink[]) ?? [];
+
+  if (!useSiteNavigation) {
+    if (customLinks.length === 0) return null;
+    return (
+      <nav className="flex items-center gap-6">
+        {customLinks.map((link, i) => (
+          <Link key={i} href={link.href} className="text-sm font-medium hover:opacity-70">
+            {link.label}
+          </Link>
+        ))}
+      </nav>
+    );
+  }
+
+  const items = buildNavTree(navItems);
+  if (items.length === 0) return null;
+
+  return (
+    <nav className="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>
+  );
+}

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

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import type { SectionProps } from "./types";
+
+export function NavZone({ node, children }: SectionProps) {
+  const zone = (node.props.zone as string) ?? "start";
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center gap-4 flex-wrap min-w-0",
+        zone === "start" && "justify-start",
+        zone === "middle" && "flex-1 justify-center",
+        zone === "end" && "justify-end"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Check } from "lucide-react";
+import { Button } from "./Button";
+import type { SectionProps } from "./types";
+
+type Tier = {
+  name: string;
+  price: string;
+  period?: string;
+  features?: string;
+  buttonText?: string;
+  buttonHref?: string;
+  highlighted?: boolean;
+};
+
+export function PricingTable({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const tiers = (node.props.tiers as Tier[]) ?? [];
+
+  if (tiers.length === 0) return null;
+
+  return (
+    <div>
+      {heading && <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">{heading}</h2>}
+      <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(${Math.min(4, tiers.length)}, minmax(0, 1fr))` }}>
+        {tiers.map((tier, i) => {
+          const features = (tier.features ?? "").split("\n").map((f) => f.trim()).filter(Boolean);
+          return (
+            <div
+              key={i}
+              className={`flex flex-col gap-4 rounded-xl border p-6 ${
+                tier.highlighted ? "border-theme-primary shadow-lg scale-105 bg-white" : "bg-white"
+              }`}
+            >
+              {tier.highlighted && (
+                <span className="self-start text-xs font-semibold uppercase tracking-wide text-theme-primary">Popular</span>
+              )}
+              <h3 className="text-lg font-semibold">{tier.name}</h3>
+              <div className="flex items-baseline gap-1">
+                <span className="text-3xl font-bold">{tier.price}</span>
+                {tier.period && <span className="text-sm opacity-60">{tier.period}</span>}
+              </div>
+              {features.length > 0 && (
+                <ul className="flex flex-col gap-2 text-sm flex-1">
+                  {features.map((f, j) => (
+                    <li key={j} className="flex items-start gap-2">
+                      <Check size={16} className="text-theme-primary shrink-0 mt-0.5" />
+                      <span className="opacity-80">{f}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              {tier.buttonText && (
+                <Button
+                  text={tier.buttonText}
+                  href={tier.buttonHref || "#"}
+                  variant={tier.highlighted ? "primary" : "outline"}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { sanitizeRichHtml } from "@/lib/sanitizeHtml";
+import type { SectionProps } from "./types";
+
+export function RichText({ node }: SectionProps) {
+  const html = (node.props.html as string) ?? "";
+  return <div className="prose" dangerouslySetInnerHTML={{ __html: sanitizeRichHtml(html) }} />;
+}

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

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Search as SearchIcon } from "lucide-react";
+import type { SectionProps } from "./types";
+
+type SearchResult = { type: "page" | "collection"; title: string; url: string; excerpt: string | null };
+
+export function SiteSearch({ node }: SectionProps) {
+  const heading = (node.props.heading as string) || "Search";
+  const placeholder = (node.props.placeholder as string) || "Search this site…";
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[] | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const runSearch = useCallback(async (q: string) => {
+    if (q.trim().length < 2) {
+      setResults(null);
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/search?q=${encodeURIComponent(q.trim())}`);
+      if (!res.ok) throw new Error("search failed");
+      const data = (await res.json()) as { results: SearchResult[] };
+      setResults(data.results);
+    } catch {
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return (
+    <div className="max-w-xl mx-auto w-full">
+      {heading && <h2 className="text-2xl font-bold mb-4 text-center">{heading}</h2>}
+      <div className="relative">
+        <SearchIcon size={18} className="absolute left-3 top-1/2 -translate-y-1/2 opacity-50" />
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            void runSearch(e.target.value);
+          }}
+          placeholder={placeholder}
+          className="w-full border rounded-lg pl-10 pr-4 py-2.5 text-sm bg-white text-slate-900"
+          aria-label={placeholder}
+        />
+      </div>
+      {loading && <p className="text-sm text-center opacity-60 mt-3">Searching…</p>}
+      {results !== null && !loading && (
+        <ul className="mt-4 space-y-2">
+          {results.length === 0 && <li className="text-sm text-center opacity-60">No results found.</li>}
+          {results.map((r) => (
+            <li key={r.url}>
+              <a href={r.url} className="block border rounded-lg px-4 py-3 hover:bg-slate-50 transition-colors">
+                <div className="font-medium">{r.title}</div>
+                {r.excerpt && <div className="text-sm opacity-70 line-clamp-2 mt-0.5">{r.excerpt}</div>}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./Button";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type Slide = { image: string; heading?: string; subheading?: string; buttonText?: string; buttonHref?: string };
+
+export function Slider({ node }: SectionProps) {
+  const slides = (node.props.slides as Slide[]) ?? [];
+  const autoplay = node.props.autoplay !== false;
+  const intervalMs = Number(node.props.intervalMs) || 5000;
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    if (!autoplay || slides.length < 2) return;
+    const id = setInterval(() => setIndex((i) => (i + 1) % slides.length), intervalMs);
+    return () => clearInterval(id);
+  }, [autoplay, intervalMs, slides.length]);
+
+  if (slides.length === 0) {
+    return (
+      <div className="h-64 flex items-center justify-center bg-slate-100 text-slate-400 text-sm">
+        No slides added yet
+      </div>
+    );
+  }
+
+  const slide = slides[Math.min(index, slides.length - 1)];
+
+  return (
+    <div className="relative w-full h-full min-h-[inherit] overflow-hidden">
+      {slide.image && <CmsImage src={slide.image} alt={slide.heading ?? ""} fill className="object-cover" />}
+      <div className="absolute inset-0 bg-black/40" />
+      <div className="relative z-10 flex flex-col items-center justify-center h-full min-h-[480px] gap-4 px-6 text-center">
+        {slide.heading && <h2 className="text-3xl md:text-4xl font-bold">{slide.heading}</h2>}
+        {slide.subheading && <p className="text-lg opacity-90">{slide.subheading}</p>}
+        {slide.buttonText && <Button text={slide.buttonText} href={slide.buttonHref || "#"} variant="primary" />}
+      </div>
+      {slides.length > 1 && (
+        <>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIndex((i) => (i - 1 + slides.length) % slides.length);
+            }}
+            className="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 rounded-full p-2"
+            aria-label="Previous slide"
+          >
+            <ChevronLeft className="text-white" />
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIndex((i) => (i + 1) % slides.length);
+            }}
+            className="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-white/20 hover:bg-white/40 rounded-full p-2"
+            aria-label="Next slide"
+          >
+            <ChevronRight className="text-white" />
+          </button>
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2">
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIndex(i);
+                }}
+                className={`h-2 w-2 rounded-full ${i === index ? "bg-white" : "bg-white/40"}`}
+                aria-label={`Go to slide ${i + 1}`}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+import type { SectionProps } from "./types";
+
+/** Pure vertical whitespace — a "break" between two sections that don't otherwise need
+ * padding of their own. Purely visual: no border, no background. */
+export function Spacer({ node }: SectionProps) {
+  const height = (node.props.height as string) || "48px";
+  return <div style={{ height }} aria-hidden="true" />;
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { SectionProps } from "./types";
+
+type StatItem = { value: string; label: string };
+
+/** Splits "500+" -> {prefix:"", number:500, suffix:"+"}, or "$2M" -> {prefix:"$", number:2, suffix:"M"}.
+ * Falls back to a null number (no animation, just display the raw string) when unparseable. */
+function parseValue(raw: string) {
+  const match = raw.match(/^([^\d]*)(\d+(?:\.\d+)?)([^\d]*)$/);
+  if (!match) return { prefix: "", number: null as number | null, suffix: raw };
+  return { prefix: match[1], number: Number(match[2]), suffix: match[3] };
+}
+
+function StatValue({ raw }: { raw: string }) {
+  const { prefix, number, suffix } = parseValue(raw);
+  const ref = useRef<HTMLSpanElement>(null);
+  const [display, setDisplay] = useState(number === null ? raw : 0);
+
+  useEffect(() => {
+    if (number === null || !ref.current) return;
+    const el = ref.current;
+    const target = number;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) return;
+        observer.disconnect();
+        const duration = 1200;
+        const start = performance.now();
+        function tick(now: number) {
+          const progress = Math.min(1, (now - start) / duration);
+          setDisplay(Math.round(target * (1 - Math.pow(1 - progress, 3))));
+          if (progress < 1) requestAnimationFrame(tick);
+        }
+        requestAnimationFrame(tick);
+      },
+      { threshold: 0.4 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [number]);
+
+  return (
+    <span ref={ref} className="text-4xl md:text-5xl font-bold tabular-nums">
+      {prefix}
+      {display}
+      {suffix}
+    </span>
+  );
+}
+
+export function Stats({ node }: SectionProps) {
+  const items = (node.props.items as StatItem[]) ?? [];
+  const columns = Math.max(2, Math.min(4, Number(node.props.columns) || 3));
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="grid gap-8" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+      {items.map((item, i) => (
+        <div key={i} className="flex flex-col items-center gap-1">
+          <StatValue raw={item.value} />
+          <span className="text-sm opacity-75">{item.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { useLayoutEffect, useRef, useState } from "react";
+import gsap from "gsap";
+import { sanitizeRichHtml } from "@/lib/sanitizeHtml";
+import type { SectionProps } from "./types";
+
+type TabItem = { label: string; content: string };
+type Transition = "none" | "fade" | "slide";
+
+export function Tabs({ node }: SectionProps) {
+  const items = (node.props.items as TabItem[]) ?? [];
+  const transition = ((node.props.tabTransition as Transition) || "fade") as Transition;
+  const [active, setActive] = useState(0);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const firstRender = useRef(true);
+
+  // Animate the panel in whenever the active tab changes — not an entrance animation
+  // (that's the universal per-section one from useEntranceAnimation), this is a
+  // click-triggered content-switch transition scoped to this component.
+  useLayoutEffect(() => {
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const el = panelRef.current;
+    if (!el || transition === "none") return;
+    const ctx = gsap.context(() => {
+      if (transition === "fade") {
+        gsap.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
+      } else {
+        gsap.fromTo(el, { opacity: 0, x: 16 }, { opacity: 1, x: 0, duration: 0.35, ease: "power2.out" });
+      }
+    });
+    return () => ctx.revert();
+  }, [active, transition]);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div>
+      <div className="flex items-center gap-1 border-b overflow-x-auto">
+        {items.map((tab, i) => (
+          <button
+            key={i}
+            onClick={() => setActive(i)}
+            className={
+              "px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors " +
+              (active === i ? "border-theme-primary text-theme-primary" : "border-transparent opacity-60 hover:opacity-100")
+            }
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <div ref={panelRef} className="prose py-6" dangerouslySetInnerHTML={{ __html: sanitizeRichHtml(items[active]?.content ?? "") }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+import { Link2 } from "lucide-react";
+import { CmsImage } from "../CmsImage";
+import type { SectionProps } from "./types";
+
+type Member = { photo?: string; name: string; role?: string; bio?: string; linkedinUrl?: string; twitterUrl?: string };
+
+export function TeamGrid({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const members = (node.props.members as Member[]) ?? [];
+  const columns = Math.max(1, Math.min(5, Number(node.props.columns) || 4));
+
+  if (members.length === 0) return null;
+
+  return (
+    <div>
+      {heading && <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">{heading}</h2>}
+      <div className="grid gap-8" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
+        {members.map((member, i) => (
+          <div key={i} className="flex flex-col items-center gap-2">
+            {member.photo ? (
+              <div className="relative w-28 h-28 rounded-full overflow-hidden">
+                <CmsImage src={member.photo} alt={member.name} fill className="object-cover" />
+              </div>
+            ) : (
+              <div className="w-28 h-28 rounded-full bg-slate-200" />
+            )}
+            <h3 className="font-semibold">{member.name}</h3>
+            {member.role && <p className="text-sm opacity-60">{member.role}</p>}
+            {member.bio && <p className="text-sm opacity-75">{member.bio}</p>}
+            {(member.linkedinUrl || member.twitterUrl) && (
+              <div className="flex gap-3 mt-1">
+                {member.linkedinUrl && (
+                  <a href={member.linkedinUrl} target="_blank" rel="noopener noreferrer" aria-label={`${member.name} on LinkedIn`} className="opacity-60 hover:opacity-100">
+                    <Link2 size={18} />
+                  </a>
+                )}
+                {member.twitterUrl && (
+                  <a href={member.twitterUrl} target="_blank" rel="noopener noreferrer" aria-label={`${member.name} on Twitter/X`} className="opacity-60 hover:opacity-100">
+                    <Link2 size={18} />
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}