@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

package/src/brand-page-maker/utils/apply-color-strategy.test.ts

@@ -13,6 +13,7 @@ import {
   SECTION_RAISED_LAYER,
 } from '@shared/color-strategies/color-strategies';
 import { pageStrategyAnchors } from '@shared/color-strategies/page-anchors';
+import { RTE_ITEM_FIELD_PAIRS } from '@shared/color-strategies/rte-field-pairs';
 import type { ColorStrategy } from '@shared/color-strategies/models';
 
 const backgroundConvertor = {
@@ -1652,12 +1653,113 @@ describe('every colour field is bound or deliberately unbound (BP-5886)', () =>
     // `successMessageStyle` is a content-model field (contact-form's success
     // message) with no settings-config entry, so the config-driven applier can
     // never write it. Kept bound as documentation of intent; this pins that the
-    // phantom set never grows silently.
+    // phantom set never grows silently. Item-level styles (each FAQ item's
+    // `questionStyle`) are declared by RTE_ITEM_FIELD_PAIRS, not by a config field.
+    const itemStyleFields = new Set(
+      Object.values(RTE_ITEM_FIELD_PAIRS).flatMap((pairs) =>
+        pairs.map((pair) => pair.styleField),
+      ),
+    );
     const phantoms = [
       ...Object.keys(FIELD_SLOT_MAP),
       ...Object.values(SECTION_RAISED_LAYER).flatMap((layer) => layer.content),
-    ].filter((name) => !configColourFields.has(name));
+    ].filter(
+      (name) => !configColourFields.has(name) && !itemStyleFields.has(name),
+    );
 
     expect(new Set(phantoms)).toEqual(new Set(['successMessageStyle']));
   });
 });
+
+describe('buildColorStrategyValues — FAQ section', () => {
+  const doc = (text: string) => ({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text,
+            marks: [{ type: 'textStyle', attrs: { color: '#123456' } }],
+          },
+        ],
+      },
+    ],
+  });
+
+  const faq = () => ({
+    type: 'faq-section',
+    displayStyle: 'faq-centered',
+    backgroundStyle: {},
+    titleStyle: {},
+    descriptionStyle: {},
+    items: [
+      {
+        id: 'q1',
+        question: doc('Q1'),
+        questionStyle: { textStyleType: 'headings', backgroundColor: '#fff' },
+        answer: 'Plain answer',
+        answerStyle: { textStyleType: 'paragraphs' },
+      },
+      {
+        id: 'q2',
+        question: 'Plain question',
+        questionStyle: { textStyleType: 'headings' },
+        answer: doc('A2'),
+        answerStyle: { textStyleType: 'paragraphs' },
+      },
+    ],
+  });
+
+  it('repaints every item: its styles and its rich-text documents', () => {
+    const config = CONTENT_SETTINGS_CONFIGS()['faq-section'];
+    const content = faq();
+    const values: Record<string, any> = buildColorStrategyValues(
+      config,
+      content,
+      'duotone',
+    );
+    const [q1, q2] = values.items;
+    const questionRef = q1.questionStyle.color;
+
+    expect(values.backgroundStyle).toBeDefined();
+    expect(questionRef).toMatch(/^var\(--palette-\d\)$/);
+    expect(q1.answerStyle.color).toMatch(/^var\(--palette-\d\)$/);
+    expect(q2.questionStyle.color).toBe(questionRef);
+    // Text on the band never takes the band's own role.
+    expect(questionRef).not.toBe(values.backgroundStyle?.backgroundColor);
+    // The strategy owns the text treatment: background cleared, typography kept.
+    expect('backgroundColor' in q1.questionStyle).toBe(false);
+    expect(q1.questionStyle.textStyleType).toBe('headings');
+    // RTE documents take the colour in their marks; plain text is left as text.
+    expect(JSON.stringify(q1.question)).toContain(questionRef);
+    expect(JSON.stringify(q1.question)).not.toContain('#123456');
+    expect(q1.answer).toBe('Plain answer');
+    expect(JSON.stringify(q2.answer)).toContain(q2.answerStyle.color);
+    // A new list — never the stored one mutated.
+    expect(values.items).not.toBe(content.items);
+    expect(content.items[0].questionStyle.backgroundColor).toBe('#fff');
+  });
+
+  it('asks the live editors to re-seed when an item document was replaced', () => {
+    const updateItemValue = vi.fn();
+    const markRteResync = vi.fn();
+
+    applyColorStrategyToItem(
+      { updateItemValue },
+      {
+        id: 'faq-1',
+        config: CONTENT_SETTINGS_CONFIGS()['faq-section'],
+        content: faq(),
+        strategyId: 'duotone',
+        markRteResync,
+      },
+    );
+
+    expect(updateItemValue).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'items' }),
+    );
+    expect(markRteResync).toHaveBeenCalledTimes(1);
+  });
+});

package/src/brand-page-maker/utils/apply-color-strategy.ts

@@ -15,7 +15,10 @@ import type {
   SectionLayers,
   StrategyAnchors,
 } from '@shared/color-strategies/models';
-import { pairedRteTextField } from '@shared/color-strategies/rte-field-pairs';
+import {
+  pairedRteTextField,
+  RTE_ITEM_FIELD_PAIRS,
+} from '@shared/color-strategies/rte-field-pairs';
 
 // A section colour field, narrowed to what the macro reads. Config is declared `<any>`,
 // so this keeps the applier honest without fighting the union.
@@ -116,6 +119,23 @@ const sectionLayers = (
   };
 };
 
+/**
+ * The strategy's text treatment for one text-style field: `color` set, text background
+ * cleared (matching the highlight strip in `setRteTextColor` — the toolbar writes both).
+ * The key is deleted rather than set undefined so `'backgroundColor' in style` checks
+ * downstream stay honest.
+ */
+const withStrategyTextStyle = (
+  current: Record<string, unknown> | undefined,
+  ref: string,
+): Record<string, unknown> => {
+  const nextStyle: Record<string, unknown> = { ...(current ?? {}), color: ref };
+
+  delete nextStyle.backgroundColor;
+
+  return nextStyle;
+};
+
 /**
  * Build the per-field colour writes a strategy stamps onto a section. Pure — reads the
  * section config + current content and returns a `{ fieldName: value }` partial. Each
@@ -170,18 +190,7 @@ export const buildColorStrategyValues = (
         | Record<string, unknown>
         | undefined;
 
-      const nextStyle: Record<string, unknown> = {
-        ...(current ?? {}),
-        color: ref,
-      };
-
-      // A strategy owns the text treatment, so it clears the text background colour
-      // too — matching the highlight strip in `setRteTextColor` (the toolbar writes
-      // both). Delete the key rather than set it undefined so `'backgroundColor' in
-      // style` checks downstream stay honest.
-      delete nextStyle.backgroundColor;
-
-      values[name] = nextStyle;
+      values[name] = withStrategyTextStyle(current, ref);
 
       // Also stamp the colour into the paired RTE document, if this field drives one.
       // `setRteTextColor` returns undefined for a plain string or legacy HTML RTE, so
@@ -219,9 +228,52 @@ export const buildColorStrategyValues = (
     values[name] = field.valueConvertor.convertBack(ref);
   });
 
+  // Item-level RTE fields (each FAQ question) carry their own style and document, so
+  // the section's field loop above never sees them. Same two halves, per item, written
+  // back as one new list.
+  const itemPairs =
+    typeof contentRecord.type === 'string'
+      ? (RTE_ITEM_FIELD_PAIRS[contentRecord.type] ?? [])
+      : [];
+
+  itemPairs.forEach((pair) => {
+    const ref = strategyRoleRefForField(
+      strategyId,
+      pair.styleField,
+      content,
+      context,
+      layers,
+      anchors,
+    );
+    const items = (values[pair.itemsField] ??
+      contentRecord[pair.itemsField]) as Record<string, unknown>[] | undefined;
+
+    if (!ref || !Array.isArray(items)) {
+      return;
+    }
+
+    values[pair.itemsField] = items.map((item) => {
+      const nextDoc = setRteTextColor(item[pair.textField], ref);
+
+      return {
+        ...item,
+        [pair.styleField]: withStrategyTextStyle(
+          item[pair.styleField] as Record<string, unknown> | undefined,
+          ref,
+        ),
+        ...(nextDoc ? { [pair.textField]: nextDoc } : {}),
+      };
+    });
+  });
+
   return values;
 };
 
+const isRteDoc = (value: unknown): boolean =>
+  typeof value === 'object' &&
+  value !== null &&
+  (value as { type?: unknown }).type === 'doc';
+
 // Just the slice of the content-settings store the macro writes through. Keeps
 // this util free of a store import (and of the module cycle that would create).
 interface ItemValueWriter {
@@ -274,14 +326,20 @@ export const applyColorStrategyToItem = (
     store.updateItemValue({ id, name, value });
   });
 
-  // A recoloured RTE field is emitted as a whole Tiptap document; the paired
-  // style-object writes are plain objects. Only the former needs the live editor
-  // to re-seed, so signal it just when a doc was among the writes.
+  // A recoloured RTE field is emitted as a whole Tiptap document (at the top level,
+  // or inside a rewritten item list); the paired style-object writes are plain
+  // objects. Only the former needs the live editor to re-seed, so signal it just
+  // when a doc was among the writes.
   const replacedRteDoc = Object.values(values).some(
     (value) =>
-      typeof value === 'object' &&
-      value !== null &&
-      (value as { type?: unknown }).type === 'doc',
+      isRteDoc(value) ||
+      (Array.isArray(value) &&
+        value.some(
+          (item) =>
+            typeof item === 'object' &&
+            item !== null &&
+            Object.values(item).some(isRteDoc),
+        )),
   );
 
   if (replacedRteDoc) {

package/src/brand-page-maker/utils/rich-text-editor.util.test.ts

@@ -15,7 +15,9 @@ import {
   resolveToolbarTextColor,
   resolveInitialToolbarTextColor,
   transformToRTE,
+  switchAllContentToRTE,
 } from './rich-text-editor.util';
+import { useExternalRichTextEditor } from '../composables/rich-text-editor/useRichTextEditor';
 import type { TextStyleDeclaration } from '@brand-page';
 
 describe('isStyleChanged', () => {
@@ -585,6 +587,114 @@ describe('transformToRTE — respects existing RTE marks on selection (BP-5886)'
   });
 });
 
+describe('item-level RTE fields (FAQ questions and answers)', () => {
+  const styleStore = () =>
+    ({
+      textStyles: {
+        textStyleOptions: {
+          headings: { style: { fontFamily: 'Oswald', fontSize: '1.5em' } },
+          paragraphs: { style: { fontFamily: 'Lato', fontSize: '1em' } },
+        },
+      },
+    }) as any;
+
+  const faqPageStore = (items: any[]) =>
+    ({
+      pages: [
+        {
+          contents: [
+            {
+              id: 'faq-1',
+              type: 'faq-section',
+              settings: {
+                content: {
+                  id: 'faq-1',
+                  type: 'faq-section',
+                  title: '',
+                  titleStyle: {},
+                  description: '',
+                  descriptionStyle: {},
+                  items,
+                },
+              },
+            },
+          ],
+        },
+      ],
+    }) as any;
+
+  const item = (id: string, questionStyle: any) => ({
+    id,
+    question: `Question ${id}`,
+    questionStyle,
+    answer: `Answer ${id}`,
+    answerStyle: { textStyleType: 'paragraphs' },
+  });
+
+  const itemsOf = (store: any) =>
+    store.pages[0].contents[0].settings.content.items;
+
+  const fontOf = (value: unknown): string | undefined =>
+    JSON.stringify(value).match(/"fontFamily":"([^"]+)"/)?.[1];
+
+  it("converts every item's plain text to RTE, each from its own style", () => {
+    const { externalEditor } = useExternalRichTextEditor();
+    const store = faqPageStore([
+      item('1', { textStyleType: 'headings' }),
+      item('2', { fontFamily: 'Georgia', fontSize: '2em' }), // unlinked
+    ]);
+
+    switchAllContentToRTE(store, externalEditor, styleStore());
+
+    const [first, second] = itemsOf(store);
+
+    expect(first.question.type).toBe('doc');
+    expect(fontOf(first.question)).toBe('Oswald');
+    expect(fontOf(first.answer)).toBe('Lato');
+    expect(fontOf(second.question)).toBe('Georgia');
+    externalEditor.destroy();
+  });
+
+  it('a global text-style change re-stamps only the items linked to it', () => {
+    const { externalEditor } = useExternalRichTextEditor();
+    const store = faqPageStore([
+      item('1', { textStyleType: 'headings' }),
+      item('2', { textStyleType: 'headings' }),
+    ]);
+
+    switchAllContentToRTE(store, externalEditor, styleStore());
+
+    const answerBefore = itemsOf(store)[0].answer;
+
+    transformToRTE(store, externalEditor, undefined, undefined, 'headings', {
+      fontFamily: 'Playfair Display',
+    } as TextStyleDeclaration);
+
+    const [first, second] = itemsOf(store);
+
+    expect(fontOf(first.question)).toBe('Playfair Display');
+    expect(fontOf(second.question)).toBe('Playfair Display');
+    expect(first.answer).toEqual(answerBefore);
+    externalEditor.destroy();
+  });
+
+  it('selecting the section leaves already-authored item documents alone', () => {
+    const { externalEditor } = useExternalRichTextEditor();
+    const store = faqPageStore([item('1', { textStyleType: 'headings' })]);
+
+    switchAllContentToRTE(store, externalEditor, styleStore());
+
+    const authored = itemsOf(store)[0].question;
+
+    transformToRTE(store, externalEditor, styleStore(), {
+      id: 'faq-1',
+    } as any);
+
+    expect(itemsOf(store)[0].question).toEqual(authored);
+    externalEditor.destroy();
+  });
+});
+
 describe('sanitiseClientSideRTE', () => {
   it('removes forbidden tags entirely', () => {
     const input =

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -31,6 +31,7 @@ import createDomPurify, { type DOMPurify } from 'dompurify';
 import Color from 'color';
 import { isHrefPageId } from '../composables/rich-text-editor/hyperlink';
 import {
+  RTE_ITEM_FIELD_PAIRS,
   RTE_SECTION_FIELD_PAIRS,
   type RTEFieldPair,
 } from '@shared/color-strategies/rte-field-pairs';
@@ -547,6 +548,46 @@ const switchRTEField = (
   }
 };
 
+// Items are visited as their own "content": each item carries the style that drives its
+// text, so the section-field helpers apply unchanged.
+const forEachRteItem = (
+  sectionType: string,
+  content: unknown,
+  visit: (item: RTESectionContent, pair: RTEFieldPair) => void,
+): void => {
+  for (const pair of RTE_ITEM_FIELD_PAIRS[sectionType] ?? []) {
+    const items = (content as Record<string, unknown>)[pair.itemsField];
+
+    if (Array.isArray(items)) {
+      items.forEach((item) => visit(item as RTESectionContent, pair));
+    }
+  }
+};
+
+/**
+ * Convert a new list item's plain text to RTE, as adding its section would. Goes through
+ * `transformRTEField` (element-first colour), so an item that copied a sibling's
+ * strategy-coloured style bakes that colour rather than the linked global one.
+ */
+export const switchRteItemFieldsToRTE = (
+  sectionType: string,
+  item: Record<string, unknown>,
+  externalEditor: Editor,
+  uiStyleSettingsStore?: StyleSettingsState,
+): void => {
+  RTE_ITEM_FIELD_PAIRS[sectionType]?.forEach((pair) =>
+    transformRTEField(
+      item as unknown as RTESectionContent,
+      pair,
+      externalEditor,
+      uiStyleSettingsStore,
+      item as unknown as Content,
+      undefined,
+      undefined,
+    ),
+  );
+};
+
 export const transformToRTE = (
   uiPageSettingStore: PageSettingsState,
   externalEditor: Editor,
@@ -575,6 +616,24 @@ export const transformToRTE = (
         }
       }
 
+      const isNewContent = !!newContent && newContent.id === contentItem.id;
+
+      forEachRteItem(
+        contentItem.type,
+        contentItem.settings.content,
+        (item, pair) =>
+          transformRTEField(
+            item,
+            pair,
+            externalEditor,
+            uiStyleSettingsStore,
+            // An unlinked item of the section being added bakes its own style.
+            isNewContent ? (item as unknown as Content) : undefined,
+            type,
+            newStyle,
+          ),
+      );
+
       if (contentItem.type === 'text') {
         const textContent = contentItem.settings.content as TextContent;
 
@@ -699,6 +758,13 @@ export const switchAllContentToRTE = (
         }
       }
 
+      forEachRteItem(
+        contentItem.type,
+        contentItem.settings.content,
+        (item, pair) =>
+          switchRTEField(item, pair, externalEditor, uiStyleSettingsStore),
+      );
+
       if (contentItem.type === 'text') {
         const textContent = contentItem.settings.content as TextContent;
 

package/src/brand-page-maker/validators/field.validator.ts

@@ -161,6 +161,7 @@ export const validatorDict: Record<ItemFieldType, Validator> = {
   'color-replacements': dummyValidator,
   'testimonial-items': dummyValidator,
   'text-items': dummyValidator,
+  'list-items': dummyValidator,
   'page-dropdown': dummyValidator,
   shape: dummyValidator,
   'logo-selection': dummyValidator,
@@ -204,6 +205,7 @@ export const adminValidatorsDict: Record<ItemFieldType, Validator> = {
   'color-replacements': dummyValidator,
   'testimonial-items': dummyValidator,
   'text-items': dummyValidator,
+  'list-items': dummyValidator,
   'page-dropdown': dummyValidator,
   shape: dummyValidator,
   'logo-selection': dummyValidator,

package/src/bundles/bundled-translations.json

@@ -1262,7 +1262,10 @@
     "medium": "Medium",
     "large": "Large",
     "bigImage": "Big Image",
-    "columns": "Columns"
+    "columns": "Columns",
+    "faqCenteredAccordion": "Centered accordion",
+    "faqSplitAccordion": "Split accordion",
+    "faqGrid": "Grid"
   },
   "model": {
     "defaultBackgroundColor": "Default background color",
@@ -1640,7 +1643,22 @@
     "enterTextHerePlaceholder": "Enter text here...",
     "bookNowLabel": "Book Now",
     "shippingLabel": "Enable Shipping Address",
-    "shippingPlaceholder": "Require customers to enter a shipping address during checkout."
+    "shippingPlaceholder": "Require customers to enter a shipping address during checkout.",
+    "faqSectionDisplayName": "FAQ",
+    "faqItemsDisplayName": "Items",
+    "defaultFaqTitle": "Frequently Asked Questions",
+    "defaultFaqDescription": "Find answers to common questions about our products, services, or business",
+    "defaultFaqQuestion": "What services do you offer?",
+    "defaultFaqAnswer": "We provide a range of products and services tailored to meet your needs. Contact us to learn more about how we can help.",
+    "faqNewQuestion": "New question?",
+    "faqNewAnswer": "Add the answer here.",
+    "faqQuestionTitle": "Question",
+    "faqAnswerTitle": "Answer",
+    "faqQuestionPlaceholder": "Enter a question",
+    "faqAnswerPlaceholder": "Enter the answer",
+    "listItemsAddItem": "Add item",
+    "listItemsMaxReached": "Max {{max}} items reached",
+    "listItemsDeleteLabel": "Delete item"
   },
   "formFields": {
     "field": "Field",

package/src/composables/useTranslate.ts

@@ -121,7 +121,8 @@ const converterTr = (key) => tr(`converter.${key}`);
 const backgroundSettingsTr = (key) => tr(`backgroundSettings.${key}`);
 const colorPickerTr = (key) => tr(`colorPicker.${key}`);
 const colorReplacementFieldTr = (key) => tr(`colorReplacementField.${key}`);
-const contentSettingsTr = (key) => tr(`contentSettings.${key}`);
+const contentSettingsTr = (key, valuesToInterpolate = {}) =>
+  tr(`contentSettings.${key}`, valuesToInterpolate);
 const formFieldsTr = (key) => tr(`formFields.${key}`);
 const genericTextInputTr = (key) => tr(`genericTextInput.${key}`);
 const imageFieldTr = (key) => tr(`imageField.${key}`);

package/src/metadata-builder/builders/item-id-utils.test.ts

@@ -182,3 +182,27 @@ describe('ensureBrandPageItemIds', () => {
     ).not.toThrow();
   });
 });
+
+describe('ensureBrandPageItemIds — FAQ items', () => {
+  it('fills a missing FAQ item id and keeps an existing one', () => {
+    const model = {
+      pages: [
+        {
+          contents: [
+            {
+              type: 'faq-section',
+              items: [{ id: 'keep', question: 'Q1' }, { question: 'Q2' }],
+            },
+          ],
+        },
+      ],
+    } as unknown as BrandPageModel;
+
+    ensureBrandPageItemIds(model);
+
+    const faqItems = (model.pages[0].contents[0] as any).items;
+
+    expect(faqItems[0].id).toBe('keep');
+    expect(faqItems[1].id).toMatch(UUID_RE);
+  });
+});

package/src/metadata-builder/parsers/section-tool-arguments.ts

@@ -18,7 +18,8 @@ type UnsupportedContentType =
   | 'map'
   | 'request-payment'
   | 'support-me'
-  | 'shop-section';
+  | 'shop-section'
+  | 'faq-section';
 
 export type SectionType = Exclude<ContentType, UnsupportedContentType>;
 

package/src/metadata-builder/parsers/section-tool-map.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, test } from 'vitest';
+import { SECTION_TOOL_MAP } from './ai-toolcall-parser';
+
+describe('SECTION_TOOL_MAP', () => {
+  test('no AI tool builds an FAQ section — FAQ is not AI-supported', () => {
+    const sectionTypes = Object.values(SECTION_TOOL_MAP).map(
+      (tool) => tool.sectionType as string,
+    );
+
+    expect(sectionTypes).not.toContain('faq-section');
+  });
+});

package/src/shared/color-strategies/color-strategies.ts

@@ -272,6 +272,10 @@ export const FIELD_SLOT_MAP: Record<string, ColorSlot> = {
   nameStyle: 'onSurface',
   positionStyle: 'onSurface',
   testimonialStyle: 'onSurface',
+  // Per-item styles of each FAQ item (RTE_ITEM_FIELD_PAIRS). The rows sit on the
+  // section band — there is no raised card.
+  questionStyle: 'onSurface',
+  answerStyle: 'onSurface',
 };
 
 /**

package/src/shared/color-strategies/rte-field-pairs.ts

@@ -21,6 +21,10 @@ export const RTE_SECTION_FIELD_PAIRS: Record<string, RTEFieldPair[]> = {
     { textField: 'title', styleField: 'titleStyle' },
     { textField: 'description', styleField: 'descriptionStyle' },
   ],
+  'faq-section': [
+    { textField: 'title', styleField: 'titleStyle' },
+    { textField: 'description', styleField: 'descriptionStyle' },
+  ],
   'images-section': [
     { textField: 'title', styleField: 'titleStyle' },
     { textField: 'description', styleField: 'descriptionStyle' },
@@ -60,6 +64,25 @@ export const RTE_SECTION_FIELD_PAIRS: Record<string, RTEFieldPair[]> = {
   ],
 };
 
+/**
+ * RTE fields that live on each entry of an item list, each driven by a style field
+ * on the SAME item — every question is its own title-like field. The rewrap walks and
+ * the colour strategies visit every item for these.
+ *
+ * The Text block's `textItems` is not listed: its walk has its own legacy fallbacks
+ * (single-text mode, section-level `textStyle`) in `transformToRTE`.
+ */
+export interface RTEItemFieldPair extends RTEFieldPair {
+  itemsField: string;
+}
+
+export const RTE_ITEM_FIELD_PAIRS: Record<string, RTEItemFieldPair[]> = {
+  'faq-section': [
+    { itemsField: 'items', textField: 'question', styleField: 'questionStyle' },
+    { itemsField: 'items', textField: 'answer', styleField: 'answerStyle' },
+  ],
+};
+
 /**
  * The `text` section is absent from the map above: on brandSite its RTE lives
  * per-item in `textItems[]`, which the editor walks separately. On

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -206,6 +206,22 @@
     "enterTextHerePlaceholder": "Enter text here...",
     "bookNowLabel": "Book Now",
     "shippingLabel": "Enable Shipping Address",
-    "shippingPlaceholder": "Require customers to enter a shipping address during checkout."
+    "shippingPlaceholder": "Require customers to enter a shipping address during checkout.",
+
+    "faqSectionDisplayName": "FAQ",
+    "faqItemsDisplayName": "Items",
+    "defaultFaqTitle": "Frequently Asked Questions",
+    "defaultFaqDescription": "Find answers to common questions about our products, services, or business",
+    "defaultFaqQuestion": "What services do you offer?",
+    "defaultFaqAnswer": "We provide a range of products and services tailored to meet your needs. Contact us to learn more about how we can help.",
+    "faqNewQuestion": "New question?",
+    "faqNewAnswer": "Add the answer here.",
+    "faqQuestionTitle": "Question",
+    "faqAnswerTitle": "Answer",
+    "faqQuestionPlaceholder": "Enter a question",
+    "faqAnswerPlaceholder": "Enter the answer",
+    "listItemsAddItem": "Add item",
+    "listItemsMaxReached": "Max {{max}} items reached",
+    "listItemsDeleteLabel": "Delete item"
   }
 }