modern-cms 1.0.0

package/template/apps/web/components/builder/Palette.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { Trash2 } from "lucide-react";
+import { COMPONENT_CATEGORIES, COMPONENT_REGISTRY, type PageNode } from "@pgcms/shared";
+import { api } from "@/lib/api";
+import { IconRenderer } from "./IconRenderer";
+
+export type SavedBlock = { id: string; name: string; content: PageNode };
+
+/** Fired (on window) whenever a block is saved or deleted, so every mounted Palette
+ * refreshes its Saved Blocks list without prop-drilling through the builder. */
+export const BLOCKS_CHANGED_EVENT = "pgcms:blocks-changed";
+
+function PaletteItem({ type, label, icon }: { type: string; label: string; icon: string }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `palette:${type}`,
+    data: { type: "palette", componentType: type },
+  });
+
+  return (
+    <button
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      className="w-full flex items-center gap-2 px-3 py-2 rounded-md border bg-white text-sm text-left hover:border-blue-400 hover:bg-blue-50 cursor-grab active:cursor-grabbing"
+      style={{ opacity: isDragging ? 0.4 : 1 }}
+    >
+      <IconRenderer name={icon} size={16} className="text-slate-500" />
+      {label}
+    </button>
+  );
+}
+
+function BlockItem({ block, onDelete }: { block: SavedBlock; onDelete: (id: string) => void }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `block:${block.id}`,
+    data: { type: "block", blockId: block.id },
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="w-full flex items-center gap-2 px-3 py-2 rounded-md border bg-white text-sm hover:border-blue-400 hover:bg-blue-50"
+      style={{ opacity: isDragging ? 0.4 : 1 }}
+    >
+      <button {...listeners} {...attributes} className="flex items-center gap-2 flex-1 text-left cursor-grab active:cursor-grabbing min-w-0">
+        <IconRenderer name="Bookmark" size={16} className="text-amber-500 shrink-0" />
+        <span className="truncate">{block.name}</span>
+      </button>
+      <button
+        onClick={() => onDelete(block.id)}
+        title="Delete saved block"
+        className="text-slate-300 hover:text-red-600 shrink-0"
+      >
+        <Trash2 size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function Palette() {
+  const [blocks, setBlocks] = useState<SavedBlock[]>([]);
+
+  useEffect(() => {
+    const load = () => api.get<SavedBlock[]>("/api/blocks").then(setBlocks).catch(() => setBlocks([]));
+    load();
+    window.addEventListener(BLOCKS_CHANGED_EVENT, load);
+    return () => window.removeEventListener(BLOCKS_CHANGED_EVENT, load);
+  }, []);
+
+  async function deleteBlock(id: string) {
+    await api.delete(`/api/blocks/${id}`);
+    window.dispatchEvent(new Event(BLOCKS_CHANGED_EVENT));
+  }
+
+  return (
+    <div className="w-64 shrink-0 border-r bg-slate-50 overflow-y-auto p-3 space-y-5">
+      {blocks.length > 0 && (
+        <div>
+          <div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Saved Blocks</div>
+          <div className="space-y-2">
+            {blocks.map((block) => (
+              <BlockItem key={block.id} block={block} onDelete={deleteBlock} />
+            ))}
+          </div>
+        </div>
+      )}
+      {COMPONENT_CATEGORIES.map((category) => {
+        const items = COMPONENT_REGISTRY.filter((c) => c.category === category && !c.hidden);
+        if (items.length === 0) return null;
+        return (
+          <div key={category}>
+            <div className="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">{category}</div>
+            <div className="space-y-2">
+              {items.map((item) => (
+                <PaletteItem key={item.type} type={item.type} label={item.label} icon={item.icon} />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/template/apps/web/components/builder/RichTextEditor.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import TextStyle from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import {
+  Bold,
+  Italic,
+  UnderlineIcon,
+  Strikethrough,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Heading1,
+  Heading2,
+  Heading3,
+  Quote,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  Undo2,
+  Redo2,
+  Eraser,
+} from "lucide-react";
+import clsx from "clsx";
+
+const TEXT_COLORS = ["#0f172a", "#dc2626", "#d97706", "#16a34a", "#2563eb", "#7c3aed", "#ffffff"];
+
+export function RichTextEditor({ value, onChange }: { value: string; onChange: (html: string) => void }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Link.configure({ openOnClick: false }),
+      Underline,
+      TextStyle,
+      Color,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+    ],
+    content: value,
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => onChange(editor.getHTML()),
+  });
+
+  if (!editor) return null;
+
+  const btn = (active: boolean) => clsx("p-1.5 rounded hover:bg-slate-100 shrink-0", active && "bg-slate-200");
+
+  return (
+    <div className="border rounded-md">
+      <div className="flex items-center gap-0.5 border-b px-2 py-1 flex-wrap">
+        <button type="button" className={btn(false)} onClick={() => editor.chain().focus().undo().run()} title="Undo">
+          <Undo2 size={14} />
+        </button>
+        <button type="button" className={btn(false)} onClick={() => editor.chain().focus().redo().run()} title="Redo">
+          <Redo2 size={14} />
+        </button>
+        <span className="w-px h-4 bg-slate-200 mx-1" />
+        <button type="button" className={btn(editor.isActive("bold"))} onClick={() => editor.chain().focus().toggleBold().run()} title="Bold">
+          <Bold size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("italic"))} onClick={() => editor.chain().focus().toggleItalic().run()} title="Italic">
+          <Italic size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("underline"))} onClick={() => editor.chain().focus().toggleUnderline().run()} title="Underline">
+          <UnderlineIcon size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("strike"))} onClick={() => editor.chain().focus().toggleStrike().run()} title="Strikethrough">
+          <Strikethrough size={14} />
+        </button>
+        <span className="w-px h-4 bg-slate-200 mx-1" />
+        <button type="button" className={btn(editor.isActive("heading", { level: 1 }))} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} title="Heading 1">
+          <Heading1 size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("heading", { level: 2 }))} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} title="Heading 2">
+          <Heading2 size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("heading", { level: 3 }))} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} title="Heading 3">
+          <Heading3 size={14} />
+        </button>
+        <span className="w-px h-4 bg-slate-200 mx-1" />
+        <button type="button" className={btn(editor.isActive("bulletList"))} onClick={() => editor.chain().focus().toggleBulletList().run()} title="Bullet list">
+          <List size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("orderedList"))} onClick={() => editor.chain().focus().toggleOrderedList().run()} title="Numbered list">
+          <ListOrdered size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive("blockquote"))} onClick={() => editor.chain().focus().toggleBlockquote().run()} title="Quote">
+          <Quote size={14} />
+        </button>
+        <span className="w-px h-4 bg-slate-200 mx-1" />
+        <button type="button" className={btn(editor.isActive({ textAlign: "left" }))} onClick={() => editor.chain().focus().setTextAlign("left").run()} title="Align left">
+          <AlignLeft size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive({ textAlign: "center" }))} onClick={() => editor.chain().focus().setTextAlign("center").run()} title="Align center">
+          <AlignCenter size={14} />
+        </button>
+        <button type="button" className={btn(editor.isActive({ textAlign: "right" }))} onClick={() => editor.chain().focus().setTextAlign("right").run()} title="Align right">
+          <AlignRight size={14} />
+        </button>
+        <span className="w-px h-4 bg-slate-200 mx-1" />
+        <button
+          type="button"
+          className={btn(editor.isActive("link"))}
+          title="Link"
+          onClick={() => {
+            const url = window.prompt("Link URL");
+            if (url) editor.chain().focus().setLink({ href: url }).run();
+          }}
+        >
+          <LinkIcon size={14} />
+        </button>
+        <div className="flex items-center gap-0.5">
+          {TEXT_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              title={`Text color ${c}`}
+              onClick={() => editor.chain().focus().setColor(c).run()}
+              className="w-4 h-4 rounded-full border shrink-0"
+              style={{ backgroundColor: c }}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          className={btn(false)}
+          title="Clear formatting"
+          onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}
+        >
+          <Eraser size={14} />
+        </button>
+      </div>
+      <EditorContent editor={editor} className="prose prose-sm max-w-none p-3 min-h-[120px] [&_.ProseMirror]:outline-none" />
+    </div>
+  );
+}

package/template/apps/web/components/renderer/CmsImage.tsx

@@ -0,0 +1,46 @@
+import Image from "next/image";
+import type { CSSProperties } from "react";
+
+type CmsImageProps = {
+  src: string;
+  alt?: string;
+  className?: string;
+  style?: CSSProperties;
+  /** Fills a positioned ancestor (that ancestor must set its own height/aspect ratio)
+   * — for cover-cropped photos (gallery tiles, card thumbnails, hero backgrounds).
+   * Omit for intrinsic-aspect images (logos, inline icons) sized by `width`/`height`. */
+  fill?: boolean;
+  width?: number;
+  height?: number;
+  sizes?: string;
+};
+
+/** Generalizes ImageBlock's next/image-vs-plain-<img> decision (relative/absolute URLs
+ * get Next's optimizer; anything else — a bare filename, a data URI — falls back to a
+ * plain tag) so every renderer component gets optimization/lazy-loading consistently
+ * instead of each reimplementing the same check. */
+export function CmsImage({ src, alt = "", className, style, fill, width, height, sizes }: CmsImageProps) {
+  if (!src) return null;
+  const useOptimized = src.startsWith("http://") || src.startsWith("https://") || src.startsWith("/");
+
+  if (!useOptimized) {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img src={src} alt={alt} className={className} style={style} />;
+  }
+
+  if (fill) {
+    return <Image src={src} alt={alt} fill className={className} style={style} sizes={sizes ?? "100vw"} />;
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width ?? 1200}
+      height={height ?? 800}
+      className={className}
+      style={style}
+      sizes={sizes}
+    />
+  );
+}

package/template/apps/web/components/renderer/NodeBackgroundLayers.tsx

@@ -0,0 +1,35 @@
+import type { NodeStyle } from "@pgcms/shared";
+
+/** Whether a node's style needs the layered-background treatment (video and/or a
+ * tint overlay). A plain background image needs no layer — nodeStyleToCss handles it
+ * as CSS background-image — so image-only sections skip the extra wrapper. */
+export function hasBackgroundLayers(style: NodeStyle): boolean {
+  return Boolean(style.backgroundVideo || style.backgroundOverlay);
+}
+
+/** Absolute-positioned background media layers for a section: looping muted video,
+ * then a tint overlay above it. Rendered inside the section element (which is always
+ * position: relative via nodeStyleToCss); the section's content must sit in a
+ * `position: relative` wrapper to paint above these. Works on ANY node type — this is
+ * what lets one section combine an image background (CSS), a video, an overlay, and
+ * arbitrary child components at once. */
+export function NodeBackgroundLayers({ style }: { style: NodeStyle }) {
+  if (!hasBackgroundLayers(style)) return null;
+  return (
+    <>
+      {style.backgroundVideo && (
+        <video
+          src={style.backgroundVideo}
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+      )}
+      {style.backgroundOverlay && (
+        <div className="absolute inset-0" style={{ backgroundColor: style.backgroundOverlay }} />
+      )}
+    </>
+  );
+}

package/template/apps/web/components/renderer/PublicPageView.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { treeContainsType, type NavItem, type Page, type PageNode, type PageTranslationInfo, type SiteTheme } from "@pgcms/shared";
+import { SiteDataContext } from "@/components/theme/SiteDataContext";
+import { RendererContext } from "./RendererContext";
+import { Renderer } from "./Renderer";
+
+/** When a global section actually carries the site's real chrome (a Header component
+ * in the global header, a Footer in the global footer), pages that still contain
+ * their own copy would show it twice — logo and nav doubled. The global one wins;
+ * page-level copies of that type are skipped. A global tree that's only decoration
+ * (utility bar, announcement strip) suppresses nothing. */
+function suppressDuplicateChrome(content: PageNode, globalHeader: PageNode | null, globalFooter: PageNode | null): PageNode {
+  const dropHeader = !!globalHeader && treeContainsType(globalHeader, "header");
+  const dropFooter = !!globalFooter && treeContainsType(globalFooter, "footer");
+  if (!dropHeader && !dropFooter) return content;
+  return {
+    ...content,
+    children: content.children.filter(
+      (child) => !(dropHeader && child.type === "header") && !(dropFooter && child.type === "footer")
+    ),
+  };
+}
+
+export function PublicPageView({
+  page,
+  theme,
+  navItems,
+  globalHeader = null,
+  globalFooter = null,
+  globalGoToTop = null,
+  pageLocale,
+  translations,
+}: {
+  page: Page;
+  theme: SiteTheme;
+  navItems: NavItem[];
+  /** Site-wide chrome (root trees) rendered above/below every page's own content —
+   * edited once in Settings → Global Sections instead of per page. */
+  globalHeader?: PageNode | null;
+  globalFooter?: PageNode | null;
+  globalGoToTop?: PageNode | null;
+  pageLocale?: string;
+  translations?: PageTranslationInfo[];
+}) {
+  return (
+    <SiteDataContext.Provider value={{ theme, navItems, pageLocale, translations }}>
+      <RendererContext.Provider value={{ mode: "view", selectedId: null }}>
+        {globalHeader && <Renderer node={globalHeader} />}
+        <Renderer node={suppressDuplicateChrome(page.content, globalHeader, globalFooter)} />
+        {globalFooter && <Renderer node={globalFooter} />}
+        {globalGoToTop && <Renderer node={globalGoToTop} />}
+      </RendererContext.Provider>
+    </SiteDataContext.Provider>
+  );
+}

package/template/apps/web/components/renderer/Renderer.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useRef } from "react";
+import type { PageNode } from "@pgcms/shared";
+import { nodeStyleToCss, nodeCustomAttributes } from "@/lib/style";
+import { buildNodeResponsiveCss } from "@/lib/responsiveCss";
+import {
+  useEntranceAnimation,
+  useModernEffects,
+} from "@/lib/useEntranceAnimation";
+import {
+  NodeBackgroundLayers,
+  hasBackgroundLayers,
+} from "./NodeBackgroundLayers";
+import { SECTION_COMPONENTS } from "./registry";
+import { useRendererContext } from "./RendererContext";
+import clsx from "clsx";
+
+export function Renderer({ node }: { node: PageNode }) {
+  const { mode, selectedId, onSelect } = useRendererContext();
+  const ref = useRef<HTMLElement | null>(null);
+  // In edit mode the canvas shows the settled final state — no entrance/pointer motion
+  // fighting selection and resize.
+  useEntranceAnimation(ref, mode === "edit" ? {} : node.style);
+  useModernEffects(ref, mode === "edit" ? {} : node.style);
+
+  // Non-destructive show/hide: hidden nodes keep their configured content but never
+  // render on the live site. They still render in the builder (see BuilderCanvasNode)
+  // so the user can find and re-enable them.
+  if (node.props.hidden === true) return null;
+
+  if (node.type === "root") {
+    return (
+      // display: contents — the wrapper must not create a box, or it becomes a sticky
+      // header's containing block (exactly the header's own height, so it could never
+      // stick). With no box, sections sit directly in the page-height wrapper and
+      // position: sticky gets the whole page to travel.
+      <div style={{ display: "contents" }}>
+        {node.children.map((child) => (
+          <Renderer key={child.id} node={child} />
+        ))}
+      </div>
+    );
+  }
+
+  const Component = SECTION_COMPONENTS[node.type];
+  if (!Component) {
+    return (
+      <div className="p-4 text-sm text-red-600 bg-red-50 border border-red-200">
+        Unknown component type: {node.type}
+      </div>
+    );
+  }
+
+  const children = node.children.map((child) => (
+    <Renderer key={child.id} node={child} />
+  ));
+  const { attrs: customAttrs, extraClassName } = nodeCustomAttributes(
+    node.style,
+  );
+  const responsiveCss = buildNodeResponsiveCss(node);
+
+  const hasTextGradient =
+    node.style.textGradientFrom && node.style.textGradientTo;
+  const css = nodeStyleToCss(
+    node.style,
+    node.type === "header" || node.type === "goToTop",
+  ) as React.CSSProperties & Record<string, string | number | undefined>;
+  if (hasTextGradient) {
+    css["--pgcms-tg-from"] = node.style.textGradientFrom;
+    css["--pgcms-tg-to"] = node.style.textGradientTo;
+  }
+  // Sticky lives on the section element itself, not inside the Header component — an
+  // inner sticky div's containing block would be this very section (exactly its own
+  // height), leaving it zero room to stick. Only on the live site: a header pinned to
+  // the canvas viewport while editing would sit on top of unrelated sections.
+  if (node.type === "header" && node.props.sticky !== false && mode !== "edit") {
+    css.position = "sticky";
+    css.top = 0;
+    css.zIndex = 50;
+  }
+
+  // Don't wrap goToTop in a section in view mode
+  if (node.type === "goToTop" && mode !== "edit") {
+    return <Component node={node}>{children}</Component>;
+  }
+
+  const content = (
+    <section
+      ref={ref}
+      {...customAttrs}
+      style={css}
+      className={clsx(
+        mode === "edit" && "pgcms-editable-hover",
+        node.style.glass && "pgcms-glass",
+        hasTextGradient && "pgcms-text-gradient",
+        // Tilt is JS-driven (useModernEffects); disable all pointer effects in the
+        // builder so selecting/resizing doesn't fight a moving target.
+        mode !== "edit" &&
+          node.style.hoverEffect === "lift" &&
+          "pgcms-hover-lift",
+        mode !== "edit" &&
+          node.style.hoverEffect === "scale" &&
+          "pgcms-hover-scale",
+        mode !== "edit" &&
+          node.style.hoverEffect === "glow" &&
+          "pgcms-hover-glow",
+        extraClassName,
+      )}
+      onClick={
+        mode === "edit"
+          ? (e) => {
+              e.stopPropagation();
+              onSelect?.(node.id);
+            }
+          : undefined
+      }
+      data-node-id={node.id}
+    >
+      {responsiveCss && (
+        <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />
+      )}
+      <NodeBackgroundLayers style={node.style} />
+      {/* Absolute background layers paint above in-flow content unless the content is
+          itself positioned — only add the wrapper when layers exist, so pages without
+          video/overlay keep their exact current DOM. */}
+      {hasBackgroundLayers(node.style) ? (
+        <div
+          className={
+            node.type === "header" || node.type === "goToTop" ? "" : "relative"
+          }
+        >
+          <Component node={node}>{children}</Component>
+        </div>
+      ) : (
+        <Component node={node}>{children}</Component>
+      )}
+    </section>
+  );
+
+  if (mode === "edit" && selectedId === node.id) {
+    return <div className="pgcms-editable-selected">{content}</div>;
+  }
+
+  return content;
+}

package/template/apps/web/components/renderer/RendererContext.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+export type RendererMode = "view" | "edit";
+
+export type RendererContextValue = {
+  mode: RendererMode;
+  selectedId: string | null;
+  onSelect?: (id: string) => void;
+};
+
+export const RendererContext = createContext<RendererContextValue>({
+  mode: "view",
+  selectedId: null,
+});
+
+export function useRendererContext() {
+  return useContext(RendererContext);
+}

package/template/apps/web/components/renderer/registry.tsx

@@ -0,0 +1,87 @@
+import type { ComponentType } from "react";
+import type { SectionProps } from "./sections/types";
+import { Header } from "./sections/Header";
+import { Footer } from "./sections/Footer";
+import { Container } from "./sections/Container";
+import { Column } from "./sections/Column";
+import { Grid } from "./sections/Grid";
+import { GridCell } from "./sections/GridCell";
+import { NavZone } from "./sections/NavZone";
+import { Logo } from "./sections/Logo";
+import { NavLinks } from "./sections/NavLinks";
+import { Hero } from "./sections/Hero";
+import { RichText } from "./sections/RichText";
+import { ImageBlock } from "./sections/ImageBlock";
+import { Slider } from "./sections/Slider";
+import { ImageBackgroundSection } from "./sections/ImageBackgroundSection";
+import { VideoBackgroundSection } from "./sections/VideoBackgroundSection";
+import { ThreeBackground } from "./sections/ThreeBackground";
+import { MapEmbed } from "./sections/MapEmbed";
+import { ButtonGroup } from "./sections/ButtonGroup";
+import { Gallery } from "./sections/Gallery";
+import { Cta } from "./sections/Cta";
+import { Countdown } from "./sections/Countdown";
+import { Stats } from "./sections/Stats";
+import { CardGrid } from "./sections/CardGrid";
+import { Accordion } from "./sections/Accordion";
+import { Tabs } from "./sections/Tabs";
+import { Marquee } from "./sections/Marquee";
+import { LanguageSwitcher } from "./sections/LanguageSwitcher";
+import { CollectionList } from "./sections/CollectionList";
+import { ContactForm } from "./sections/ContactForm";
+import { SiteSearch } from "./sections/SiteSearch";
+import { EmbedBlock } from "./sections/EmbedBlock";
+import { GoToTop } from "./sections/GoToTop";
+import { Testimonial } from "./sections/Testimonial";
+import { PricingTable } from "./sections/PricingTable";
+import { VideoEmbed } from "./sections/VideoEmbed";
+import { TeamGrid } from "./sections/TeamGrid";
+import { LogoCloud } from "./sections/LogoCloud";
+import { Timeline } from "./sections/Timeline";
+import { BeforeAfter } from "./sections/BeforeAfter";
+import { Divider } from "./sections/Divider";
+import { Spacer } from "./sections/Spacer";
+
+export const SECTION_COMPONENTS: Record<string, ComponentType<SectionProps>> = {
+  goToTop: GoToTop,
+  header: Header,
+  footer: Footer,
+  container: Container,
+  column: Column,
+  grid: Grid,
+  gridCell: GridCell,
+  navZone: NavZone,
+  logo: Logo,
+  navLinks: NavLinks,
+  hero: Hero,
+  richText: RichText,
+  imageBlock: ImageBlock,
+  slider: Slider,
+  imageBackgroundSection: ImageBackgroundSection,
+  videoBackgroundSection: VideoBackgroundSection,
+  threeBackground: ThreeBackground,
+  mapEmbed: MapEmbed,
+  buttonGroup: ButtonGroup,
+  gallery: Gallery,
+  cta: Cta,
+  countdown: Countdown,
+  stats: Stats,
+  cardGrid: CardGrid,
+  accordion: Accordion,
+  tabs: Tabs,
+  marquee: Marquee,
+  languageSwitcher: LanguageSwitcher,
+  collectionList: CollectionList,
+  contactForm: ContactForm,
+  siteSearch: SiteSearch,
+  embed: EmbedBlock,
+  testimonial: Testimonial,
+  pricingTable: PricingTable,
+  videoEmbed: VideoEmbed,
+  teamGrid: TeamGrid,
+  logoCloud: LogoCloud,
+  timeline: Timeline,
+  beforeAfter: BeforeAfter,
+  divider: Divider,
+  spacer: Spacer,
+};

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

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import type { SectionProps } from "./types";
+
+type AccordionItem = { question: string; answer: string };
+
+export function Accordion({ node }: SectionProps) {
+  const heading = node.props.heading as string;
+  const items = (node.props.items as AccordionItem[]) ?? [];
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div>
+      {heading && <h2 className="text-2xl md:text-3xl font-bold mb-8 text-center">{heading}</h2>}
+      <div className="divide-y border rounded-lg">
+        {items.map((item, i) => {
+          const open = openIndex === i;
+          return (
+            <div key={i}>
+              <button
+                onClick={() => setOpenIndex(open ? null : i)}
+                className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left font-medium"
+                aria-expanded={open}
+              >
+                <span>{item.question}</span>
+                <ChevronDown size={18} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+              </button>
+              {open && <div className="px-5 pb-4 text-sm opacity-80">{item.answer}</div>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}