# ai-builder/2.1.7/assets/JSON-Blocks/banner.js

AI Builder – Generate pages, blocks, images & translate with AI, version 2.1.7. 235 lines.

- Page: https://pluginprobe.com/plugins/ai-builder/2.1.7/code/assets/JSON-Blocks/banner.js
- Raw: https://pluginprobe.com/plugins/ai-builder/2.1.7/raw/assets/JSON-Blocks/banner.js
- Modified: 2025-08-23T08:19:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ai-builder/2.1.7/code/assets/JSON-Blocks/banner.js#L10-L20`.

```javascript
const bannerBlocks = [
  {
    id: "banner-01",
    jsonBlocks: {
      blockName: "core/group",
      attrs: {
        align: "full",
        className: "banner-container banner-modern",
        style: {
          color: {
            background: "#2563eb",
          },
        },
      },
      innerBlocks: [
        {
          blockName: "core/group",
          attrs: {
            className: "banner-content",
          },
          innerBlocks: [
            {
              blockName: "core/heading",
              attrs: {
                content: "Welcome to Our Platform",
                level: 2,
                className: "banner-title",
                textAlign: "center",
                style: {
                  color: {
                    text: "#ffffff",
                  },
                },
              },
            },
            {
              blockName: "core/paragraph",
              attrs: {
                content: "Discover amazing features and possibilities",
                className: "banner-description ai-text-block",
                textAlign: "center",
                style: {
                  color: {
                    text: "#ffffff",
                  },
                },
              },
            },
            {
              blockName: "core/buttons",
              attrs: {
                className: "banner-buttons",
              },
              innerBlocks: [
                {
                  blockName: "core/button",
                  attrs: {
                    text: "Get Started",
                    className: "banner-button",
                    style: {
                      color: {
                        background: "#ffffff",
                        text: "#2563eb",
                      },
                    },
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    id: "banner-02",
    jsonBlocks: {
      blockName: "core/group",
      attrs: {
        align: "full",
        className: "banner-container banner-gradient",
        style: {
          color: {
            background: "linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)",
          },
        },
      },
      innerBlocks: [
        {
          blockName: "core/columns",
          attrs: {
            align: "full",
          },
          innerBlocks: [
            {
              blockName: "core/column",
              attrs: {
                className: "banner-text-column",
              },
              innerBlocks: [
                {
                  blockName: "core/heading",
                  attrs: {
                    content: "Transform Your Experience",
                    level: 2,
                    className: "banner-title",
                    style: {
                      color: {
                        text: "#ffffff",
                      },
                    },
                  },
                },
                {
                  blockName: "core/paragraph",
                  attrs: {
                    content: "Join thousands of satisfied users worldwide",
                    className: "banner-description ai-text-block",
                    style: {
                      color: {
                        text: "#ffffff",
                      },
                    },
                  },
                },
                {
                  blockName: "core/buttons",
                  attrs: {
                    className: "banner-buttons",
                  },
                  innerBlocks: [
                    {
                      blockName: "core/button",
                      attrs: {
                        text: "Learn More",
                        className: "banner-button",
                        style: {
                          color: {
                            background: "#ffffff",
                            text: "#2563eb",
                          },
                        },
                      },
                    },
                  ],
                },
              ],
            },
            {
              blockName: "core/column",
              attrs: {
                className: "banner-image-column",
              },
              innerBlocks: [
                {
                  blockName: "core/image",
                  attrs: {
                    imageUrl: "",
                    className: "ai-image-block",
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  },
  {
    id: "banner-03",
    jsonBlocks: {
      blockName: "core/group",
      attrs: {
        align: "full",
        className: "banner-container banner-minimal",
        style: {
          color: {
            background: "#f8f9fa",
          },
        },
      },
      innerBlocks: [
        {
          blockName: "core/group",
          attrs: {
            className: "banner-content",
          },
          innerBlocks: [
            {
              blockName: "core/heading",
              attrs: {
                content: "Simple & Effective",
                level: 2,
                className: "banner-title",
                textAlign: "center",
              },
            },
            {
              blockName: "core/paragraph",
              attrs: {
                content: "Streamline your workflow with our intuitive tools",
                className: "banner-description ai-text-block",
                textAlign: "center",
              },
            },
            {
              blockName: "core/buttons",
              attrs: {
                className: "banner-buttons",
              },
              innerBlocks: [
                {
                  blockName: "core/button",
                  attrs: {
                    text: "Try Now",
                    className: "banner-button",
                    style: {
                      color: {
                        background: "#2563eb",
                        text: "#ffffff",
                      },
                    },
                  },
                },
              ],
            },
          ],
        },
      ],
    },
  },
];

export default bannerBlocks;

```