metabuilder/packages/ui_intro/seed/components.json

[
  {
    "id": "intro_section",
    "type": "Box",
    "props": {
      "component": "section",
      "className": "intro-section",
      "sx": {
        "py": 8,
        "minHeight": "60vh",
        "display": "flex",
        "alignItems": "center"
      }
    },
    "children": [
      {
        "id": "intro_section_container",
        "type": "Container",
        "props": {
          "maxWidth": "lg",
          "className": "intro-container"
        },
        "children": [
          {
            "id": "intro_section_content",
            "type": "Stack",
            "props": {
              "spacing": 4,
              "alignItems": "center",
              "className": "intro-content",
              "sx": {
                "textAlign": "center"
              }
            },
            "children": [
              {
                "id": "intro_section_eyebrow",
                "type": "Text",
                "props": {
                  "variant": "overline",
                  "children": "{{eyebrow}}",
                  "className": "intro-eyebrow",
                  "sx": {
                    "color": "primary.main",
                    "fontWeight": 600,
                    "letterSpacing": 2
                  }
                },
                "children": []
              },
              {
                "id": "intro_section_title",
                "type": "Text",
                "props": {
                  "variant": "h1",
                  "children": "{{title}}",
                  "className": "intro-title",
                  "sx": {
                    "fontWeight": 700,
                    "fontSize": { "xs": "2.5rem", "md": "3.5rem", "lg": "4rem" },
                    "lineHeight": 1.2,
                    "maxWidth": "900px"
                  }
                },
                "children": []
              },
              {
                "id": "intro_section_description",
                "type": "Text",
                "props": {
                  "variant": "body1",
                  "children": "{{description}}",
                  "className": "intro-description",
                  "sx": {
                    "color": "text.secondary",
                    "fontSize": { "xs": "1rem", "md": "1.25rem" },
                    "maxWidth": "700px",
                    "lineHeight": 1.6
                  }
                },
                "children": []
              },
              {
                "id": "intro_section_cta_group",
                "type": "Stack",
                "props": {
                  "direction": "row",
                  "spacing": 2,
                  "justifyContent": "center",
                  "className": "intro-cta-group",
                  "sx": {
                    "flexWrap": "wrap",
                    "mt": 2
                  }
                },
                "children": [
                  {
                    "id": "intro_section_cta_primary",
                    "type": "Button",
                    "props": {
                      "variant": "contained",
                      "color": "primary",
                      "size": "large",
                      "href": "{{primaryCtaHref}}",
                      "children": "{{primaryCtaText}}",
                      "className": "intro-cta-primary",
                      "sx": {
                        "px": 4,
                        "py": 1.5,
                        "fontSize": "1rem",
                        "fontWeight": 600
                      }
                    },
                    "children": []
                  },
                  {
                    "id": "intro_section_cta_secondary",
                    "type": "Button",
                    "props": {
                      "variant": "outlined",
                      "color": "primary",
                      "size": "large",
                      "href": "{{secondaryCtaHref}}",
                      "children": "{{secondaryCtaText}}",
                      "className": "intro-cta-secondary",
                      "sx": {
                        "px": 4,
                        "py": 1.5,
                        "fontSize": "1rem",
                        "fontWeight": 600
                      }
                    },
                    "children": []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "id": "intro_section_left",
    "type": "Box",
    "props": {
      "component": "section",
      "className": "intro-section intro-section--left",
      "sx": {
        "py": 8,
        "minHeight": "60vh",
        "display": "flex",
        "alignItems": "center"
      }
    },
    "children": [
      {
        "id": "intro_section_left_container",
        "type": "Container",
        "props": {
          "maxWidth": "lg",
          "className": "intro-container"
        },
        "children": [
          {
            "id": "intro_section_left_grid",
            "type": "Grid",
            "props": {
              "container": true,
              "spacing": 6,
              "alignItems": "center",
              "className": "intro-grid"
            },
            "children": [
              {
                "id": "intro_section_left_content_col",
                "type": "Grid",
                "props": {
                  "item": true,
                  "xs": 12,
                  "md": 6,
                  "className": "intro-content-col"
                },
                "children": [
                  {
                    "id": "intro_section_left_content",
                    "type": "Stack",
                    "props": {
                      "spacing": 3,
                      "className": "intro-content",
                      "sx": {
                        "textAlign": "left"
                      }
                    },
                    "children": [
                      {
                        "id": "intro_section_left_eyebrow",
                        "type": "Text",
                        "props": {
                          "variant": "overline",
                          "children": "{{eyebrow}}",
                          "className": "intro-eyebrow",
                          "sx": {
                            "color": "primary.main",
                            "fontWeight": 600,
                            "letterSpacing": 2
                          }
                        },
                        "children": []
                      },
                      {
                        "id": "intro_section_left_title",
                        "type": "Text",
                        "props": {
                          "variant": "h2",
                          "children": "{{title}}",
                          "className": "intro-title",
                          "sx": {
                            "fontWeight": 700,
                            "fontSize": { "xs": "2rem", "md": "2.75rem" },
                            "lineHeight": 1.2
                          }
                        },
                        "children": []
                      },
                      {
                        "id": "intro_section_left_description",
                        "type": "Text",
                        "props": {
                          "variant": "body1",
                          "children": "{{description}}",
                          "className": "intro-description",
                          "sx": {
                            "color": "text.secondary",
                            "fontSize": "1.125rem",
                            "lineHeight": 1.6
                          }
                        },
                        "children": []
                      },
                      {
                        "id": "intro_section_left_cta_group",
                        "type": "Stack",
                        "props": {
                          "direction": "row",
                          "spacing": 2,
                          "className": "intro-cta-group",
                          "sx": {
                            "flexWrap": "wrap",
                            "mt": 1
                          }
                        },
                        "children": [
                          {
                            "id": "intro_section_left_cta_primary",
                            "type": "Button",
                            "props": {
                              "variant": "contained",
                              "color": "primary",
                              "size": "large",
                              "href": "{{primaryCtaHref}}",
                              "children": "{{primaryCtaText}}",
                              "className": "intro-cta-primary"
                            },
                            "children": []
                          },
                          {
                            "id": "intro_section_left_cta_secondary",
                            "type": "Button",
                            "props": {
                              "variant": "outlined",
                              "color": "primary",
                              "size": "large",
                              "href": "{{secondaryCtaHref}}",
                              "children": "{{secondaryCtaText}}",
                              "className": "intro-cta-secondary"
                            },
                            "children": []
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "id": "intro_section_left_media_col",
                "type": "Grid",
                "props": {
                  "item": true,
                  "xs": 12,
                  "md": 6,
                  "className": "intro-media-col"
                },
                "children": [
                  {
                    "id": "intro_section_left_media",
                    "type": "Box",
                    "props": {
                      "className": "intro-media",
                      "sx": {
                        "borderRadius": 2,
                        "overflow": "hidden",
                        "bgcolor": "grey.100"
                      }
                    },
                    "children": [
                      {
                        "id": "intro_section_left_image",
                        "type": "Box",
                        "props": {
                          "component": "img",
                          "src": "{{mediaUrl}}",
                          "alt": "{{mediaAlt}}",
                          "className": "intro-image",
                          "sx": {
                            "width": "100%",
                            "height": "auto",
                            "display": "block"
                          }
                        },
                        "children": []
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  {
    "id": "intro_section_compact",
    "type": "Box",
    "props": {
      "component": "section",
      "className": "intro-section intro-section--compact",
      "sx": {
        "py": 4,
        "borderBottom": 1,
        "borderColor": "divider"
      }
    },
    "children": [
      {
        "id": "intro_section_compact_container",
        "type": "Container",
        "props": {
          "maxWidth": "lg",
          "className": "intro-container"
        },
        "children": [
          {
            "id": "intro_section_compact_content",
            "type": "Stack",
            "props": {
              "direction": { "xs": "column", "md": "row" },
              "spacing": 3,
              "alignItems": { "xs": "flex-start", "md": "center" },
              "justifyContent": "space-between",
              "className": "intro-content"
            },
            "children": [
              {
                "id": "intro_section_compact_text",
                "type": "Stack",
                "props": {
                  "spacing": 1,
                  "className": "intro-text"
                },
                "children": [
                  {
                    "id": "intro_section_compact_eyebrow",
                    "type": "Text",
                    "props": {
                      "variant": "overline",
                      "children": "{{eyebrow}}",
                      "className": "intro-eyebrow",
                      "sx": {
                        "color": "primary.main",
                        "fontWeight": 600
                      }
                    },
                    "children": []
                  },
                  {
                    "id": "intro_section_compact_title",
                    "type": "Text",
                    "props": {
                      "variant": "h4",
                      "children": "{{title}}",
                      "className": "intro-title",
                      "sx": {
                        "fontWeight": 600
                      }
                    },
                    "children": []
                  },
                  {
                    "id": "intro_section_compact_description",
                    "type": "Text",
                    "props": {
                      "variant": "body2",
                      "children": "{{description}}",
                      "className": "intro-description",
                      "sx": {
                        "color": "text.secondary"
                      }
                    },
                    "children": []
                  }
                ]
              },
              {
                "id": "intro_section_compact_cta",
                "type": "Button",
                "props": {
                  "variant": "contained",
                  "color": "primary",
                  "href": "{{primaryCtaHref}}",
                  "children": "{{primaryCtaText}}",
                  "className": "intro-cta-primary"
                },
                "children": []
              }
            ]
          }
        ]
      }
    ]
  }
]