Add new sections, update design system, fix header mobile layout

Sections:
- Add announcement-bar, cards, features-3col-cards, hero-card-homepage, hero-card-page, hero-slider
- Rename content-image-right → content-image (image-left layout, better mobile stacking)

Design system:
- Add cards-grid global class (flex-wrap for fluid wrapping card grids)
- Update feature-card with responsive _widthMax constraints (33%/50%/95%)
- Document Bricks Style Manager spacing setup in design.md

Headers:
- Fix header-with-cta mobile hamburger positioning — wrap nav+button in block element with row-reverse on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

TODO.md

@@ -1,8 +0,0 @@
-TODO:
-
-- Updated sections with updated sections found at ./Updated_Sections
-- Institute some Global CSS Variables for color (Primary, Secondary, Tertiary)
-  - Assign primary color as background for header & footer
-  - Assign colors throughout the site
-    - Maybe make an importable theme style for Bricks?
-- Also build a Global Classes import sheet, for sharing classes between 3 row containers, 4 row containers, footer sub section containers, etc.

design/bcw-css-variables.json

@@ -134,64 +134,76 @@
       "value": "96px",
       "category": "bcwspc"
     },
+    {
+      "id": "bcwv31",
+      "name": "row-gap",
+      "value": "15px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv32",
+      "name": "col-gap",
+      "value": "15px",
+      "category": "bcwspc"
+    },
     {
       "id": "bcwv21",
       "name": "h1",
-      "value": "3rem",
+      "value": "64px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv22",
       "name": "h2",
-      "value": "2.25rem",
+      "value": "48px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv23",
       "name": "h3",
-      "value": "1.75rem",
+      "value": "36px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv24",
       "name": "h4",
-      "value": "1.25rem",
+      "value": "28px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv25",
       "name": "h5",
-      "value": "1.125rem",
+      "value": "22px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv26",
       "name": "h6",
-      "value": "1rem",
+      "value": "18px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv27",
       "name": "text-sm",
-      "value": "0.875rem",
+      "value": "14px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv28",
       "name": "text-base",
-      "value": "1rem",
+      "value": "16px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv29",
       "name": "text-lg",
-      "value": "1.125rem",
+      "value": "18px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv30",
       "name": "text-xl",
-      "value": "1.25rem",
+      "value": "20px",
       "category": "bcwtyp"
     }
   ]

design/bcw-global-classes.json

@@ -6,7 +6,7 @@
       "_typography": {
         "text-align": "center"
       },
-      "_rowGap": "10px"
+      "_rowGap": "var(--row-gap)"
     },
     "modified": 1772146285,
     "user_id": 2
@@ -15,7 +15,7 @@
     "id": "footer-sub-section",
     "name": "footer-sub-section",
     "settings": {
-      "_rowGap": "15px"
+      "_rowGap": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
@@ -53,7 +53,7 @@
       "_alignItems": "flex-start",
       "_justifyContent": "center",
       "_gap": "32px",
-      "_rowGap:mobile_portrait": "15px"
+      "_rowGap:mobile_portrait": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
@@ -66,9 +66,52 @@
       "_alignItems": "flex-start",
       "_justifyContent": "center",
       "_gap": "24px",
-      "_rowGap:mobile_portrait": "15px"
+      "_rowGap:mobile_portrait": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
+  },
+  {
+    "id": "cards-grid",
+    "name": "cards-grid",
+    "settings": {
+      "_direction": "row",
+      "_flexWrap": "wrap",
+      "_alignItems": "stretch",
+      "_gap": "var(--col-gap)"
+    },
+    "modified": 1773187200,
+    "user_id": 2
+  },
+  {
+    "id": "feature-card",
+    "name": "feature-card",
+    "settings": {
+      "_background": {
+        "color": {
+          "raw": "var(--color-bg-alt)"
+        }
+      },
+      "_padding": {
+        "top": "var(--space-md)",
+        "right": "var(--space-md)",
+        "bottom": "var(--space-md)",
+        "left": "var(--space-md)"
+      },
+      "_border": {
+        "radius": {
+          "top": "8px",
+          "right": "8px",
+          "bottom": "8px",
+          "left": "8px"
+        }
+      },
+      "_rowGap": "var(--row-gap)",
+      "_widthMax": "33%",
+      "_widthMax:mobile_landscape": "50%",
+      "_widthMax:mobile_portrait": "95%"
+    },
+    "modified": 1773187200,
+    "user_id": 2
   }
 ]

design/design.md

@@ -8,6 +8,17 @@ Three importable files. **Import in this order** before any templates:
 
 ---
 
+## Bricks Style Manager — Spacing
+
+Bricks has a built-in Spacing section in the Style Manager that works well and should be kept enabled. One setting needs to match our design system:
+
+- **Scale Steps** → set to: `2xs,xs,sm,md,lg,xl,2xl`
+- **Baseline** → set to `sm`
+
+This aligns the Style Manager's spacing scale labels with our `--space-*` CSS variable naming convention.
+
+---
+
 ## How to Import
 
 | File                      | Where to import                                          |
@@ -60,6 +71,8 @@ A simple scale from extra-small to 2x-large. Use these in gap, padding, and marg
 | `--space-lg`   | `40px`  | Section internal gap (header to content row)     |
 | `--space-xl`   | `64px`  | Section top/bottom padding                       |
 | `--space-2xl`  | `96px`  | Hero or large feature section padding            |
+| `--row-gap`    | `15px`  | Default row gap between stacked elements         |
+| `--col-gap`    | `15px`  | Default column gap between side-by-side elements |
 
 **Usage example in Bricks:**
 In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value.
@@ -72,16 +85,16 @@ Heading and text size scale. Apply these in the font-size field of any text elem
 
 | Variable       | Value       | Purpose              |
 | -------------- | ----------- | -------------------- |
-| `--h1`         | `3rem`      | Page-level heading   |
+| `--h1`         | `64px`      | Page-level heading   |
-| `--h2`         | `2.25rem`   | Section heading      |
+| `--h2`         | `48px`      | Section heading      |
-| `--h3`         | `1.75rem`   | Sub-section heading  |
+| `--h3`         | `36px`      | Sub-section heading  |
-| `--h4`         | `1.25rem`   | Card or block heading|
+| `--h4`         | `28px`      | Card or block heading|
-| `--h5`         | `1.125rem`  | Minor heading        |
+| `--h5`         | `22px`      | Minor heading        |
-| `--h6`         | `1rem`      | Small label heading  |
+| `--h6`         | `18px`      | Small label heading  |
-| `--text-sm`    | `0.875rem`  | Captions, footnotes  |
+| `--text-sm`    | `14px`      | Captions, footnotes  |
-| `--text-base`  | `1rem`      | Body copy (default)  |
+| `--text-base`  | `16px`      | Body copy (default)  |
-| `--text-lg`    | `1.125rem`  | Lead paragraph       |
+| `--text-lg`    | `18px`      | Lead paragraph       |
-| `--text-xl`    | `1.25rem`   | Large intro text     |
+| `--text-xl`    | `20px`      | Large intro text     |
 
 ---
 
@@ -104,6 +117,8 @@ Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-li
 | `col-3`              | 3-column row container            | `flex-direction: row`, centered, `gap: 32px`, stacks on mobile |
 | `col-4`              | 4-column row container            | `flex-direction: row`, centered, `gap: 24px`, stacks on mobile |
 | `features-container` | Individual feature column (3 or 4 col) | `text-align: center`, `row-gap: 10px`               |
+| `cards-grid`         | Fluid wrapping card row                  | `flex-wrap: wrap`, `align-items: stretch`, `gap: var(--col-gap)` — cards wrap to new rows automatically |
+| `feature-card`       | Individual feature column (card variant) | `background: var(--color-bg-alt)`, `padding: var(--space-md)`, `border-radius: 8px`, `row-gap: 15px`, `max-width: 33%` (50% landscape, 95% portrait) |
 | `footer-sub-section` | Footer column containers          | `row-gap: 15px`                                           |
 
-**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically.
+**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically. `feature-card` is embedded in `features-3col-cards` and `cards`. `cards-grid` and `feature-card` are embedded in `cards` — importing that template brings both along. For the fluid card layout, each card element also has `_flexBasis: 280px` and `_flexGrow: 1` set inline so they fill the row and wrap to the next line automatically.

headers/header-with-cta.json

@@ -21,7 +21,7 @@
       "id": "con001",
       "name": "container",
       "parent": "sec001",
-      "children": ["log001", "nav001", "btn001"],
+      "children": ["log001", "blk001"],
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
@@ -36,21 +36,51 @@
       "children": [],
       "settings": []
     },
+    {
+      "id": "blk001",
+      "name": "block",
+      "parent": "con001",
+      "children": ["nav001", "btn001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "space-around",
+        "_columnGap": "var(--col-gap)",
+        "_rowGap": "var(--row-gap)",
+        "_direction:mobile_portrait": "row-reverse",
+        "_direction:mobile_landscape": "row-reverse",
+        "_width:mobile_landscape": "fit-content",
+        "_columnGap:mobile_landscape": "var(--col-gap)",
+        "_rowGap:mobile_landscape": "var(--row-gap)"
+      },
+      "label": "Nav Group"
+    },
     {
       "id": "nav001",
       "name": "nav-menu",
-      "parent": "con001",
+      "parent": "blk001",
       "children": [],
-      "settings": []
+      "settings": {
+        "subMenuTransform": {
+          "translateY": "28px"
+        },
+        "mobileMenuToggleColor:mobile_portrait": {
+          "raw": "var(--color-white)"
+        },
+        "mobileMenuToggleColor:mobile_landscape": {
+          "raw": "var(--color-white)"
+        }
+      }
     },
     {
       "id": "btn001",
       "name": "button",
-      "parent": "con001",
+      "parent": "blk001",
       "children": [],
       "settings": {
         "text": "Get in Touch",
-        "style": "primary"
+        "style": "primary",
+        "_display:mobile_portrait": "none"
       }
     }
   ]

sections/announcement-bar.json

@@ -0,0 +1,134 @@
+{
+  "title": "BCW — Announcement Bar",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary-dark)"
+          }
+        },
+        "_typography": {
+          "color": {
+            "raw": "var(--color-white)"
+          },
+          "font-size": "12",
+          "font-weight": "600"
+        },
+        "_padding": {
+          "top": "10",
+          "bottom": "10"
+        }
+      },
+      "label": "Announcement Bar"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["blk001", "blk002"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "space-between",
+        "_direction:mobile_portrait": "column",
+        "_alignItems:mobile_portrait": "center"
+      }
+    },
+    {
+      "id": "blk001",
+      "name": "block",
+      "parent": "con001",
+      "children": ["ico001", "txt001"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "flex-start",
+        "_justifyContent:mobile_portrait": "center",
+        "_width": "max-content",
+        "_alignItems": "center"
+      },
+      "label": "Left Info"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "blk001",
+      "children": [],
+      "settings": {
+        "icon": {
+          "library": "themify",
+          "icon": "ti-location-pin"
+        },
+        "iconSize": "24px",
+        "_padding": {
+          "right": "10"
+        },
+        "_typography": {
+          "font-size": "22"
+        }
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "blk001",
+      "children": [],
+      "settings": {
+        "text": "123 Your Street, City, State ZIP",
+        "_typography": {
+          "font-size": "13"
+        }
+      }
+    },
+    {
+      "id": "blk002",
+      "name": "block",
+      "parent": "con001",
+      "children": ["ico002", "txt002"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "flex-end",
+        "_justifyContent:mobile_portrait": "center",
+        "_width": "max-content",
+        "_alignItems": "center"
+      },
+      "label": "Right Info"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "blk002",
+      "children": [],
+      "settings": {
+        "icon": {
+          "library": "themify",
+          "icon": "ti-headphone"
+        },
+        "iconSize": "24px",
+        "_padding": {
+          "right": "10"
+        },
+        "_typography": {
+          "font-size": "22"
+        }
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "blk002",
+      "children": [],
+      "settings": {
+        "text": "Tel: +1 000-000-0000",
+        "_typography": {
+          "font-size": "13"
+        }
+      }
+    }
+  ]
+}

sections/cards.json

@@ -0,0 +1,278 @@
+{
+  "title": "BCW — Cards",
+  "type": "section",
+  "templateType": "section",
+  "global_classes": [
+    {
+      "id": "cards-grid",
+      "name": "cards-grid",
+      "settings": {
+        "_direction": "row",
+        "_flexWrap": "wrap",
+        "_alignItems": "stretch",
+        "_gap": "var(--col-gap)"
+      },
+      "modified": 1773187200,
+      "user_id": 2
+    },
+    {
+      "id": "feature-card",
+      "name": "feature-card",
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-bg-alt)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-md)",
+          "right": "var(--space-md)",
+          "bottom": "var(--space-md)",
+          "left": "var(--space-md)"
+        },
+        "_border": {
+          "radius": {
+            "top": "8px",
+            "right": "8px",
+            "bottom": "8px",
+            "left": "8px"
+          }
+        },
+        "_rowGap": "var(--row-gap)",
+        "_widthMax": "33%",
+        "_widthMax:mobile_landscape": "50%",
+        "_widthMax:mobile_portrait": "95%"
+      },
+      "modified": 1773187200,
+      "user_id": 2
+    }
+  ],
+  "content": [
+    {
+      "id": "sec001",
+      "name": "container",
+      "parent": 0,
+      "children": ["con001", "con002"],
+      "settings": {
+        "_direction": "column",
+        "_gap": "40px",
+        "_margin": {
+          "top": "var(--space-lg)",
+          "bottom": "var(--space-lg)"
+        },
+        "_padding:mobile_portrait": {
+          "left": "15px",
+          "right": "15px"
+        }
+      },
+      "label": "Cards Section"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["hdg001", "txt001"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "16px"
+      },
+      "label": "Section Header"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "tag": "h2",
+        "text": "Section Heading"
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "text": "A brief supporting statement that introduces this section to your visitors."
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con003", "con004", "con005", "con006"],
+      "settings": {
+        "_cssGlobalClasses": ["cards-grid"],
+        "_rowGap": "var(--row-gap)",
+        "_columnGap": "var(--col-gap)",
+        "_padding:tablet_portrait": {
+          "left": "15",
+          "right": "15"
+        }
+      },
+      "label": "Cards Grid"
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico001", "hdg002", "txt002"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card One"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "con003",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg002",
+      "name": "heading",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card One"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con004",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico002", "hdg003", "txt003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Two"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "con004",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg003",
+      "name": "heading",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Two"
+      }
+    },
+    {
+      "id": "txt003",
+      "name": "text-basic",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con005",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico003", "hdg004", "txt004"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Three"
+    },
+    {
+      "id": "ico003",
+      "name": "icon",
+      "parent": "con005",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg004",
+      "name": "heading",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Three"
+      }
+    },
+    {
+      "id": "txt004",
+      "name": "text-basic",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con006",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico004", "hdg005", "txt005"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Four"
+    },
+    {
+      "id": "ico004",
+      "name": "icon",
+      "parent": "con006",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg005",
+      "name": "heading",
+      "parent": "con006",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Four"
+      }
+    },
+    {
+      "id": "txt005",
+      "name": "text-basic",
+      "parent": "con006",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    }
+  ]
+}

sections/content-image.json

@@ -1,5 +1,5 @@
 {
-  "title": "BCW — Content Image Right",
+  "title": "BCW — Content Image",
   "type": "section",
   "templateType": "section",
   "content": [
@@ -7,7 +7,7 @@
       "id": "con001",
       "name": "container",
       "parent": 0,
-      "children": ["con002", "imgcol"],
+      "children": ["imgcol", "con002"],
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
@@ -16,9 +16,49 @@
         "_margin": {
           "top": "15",
           "bottom": "15"
+        },
+        "_columnGap": "var(--col-gap)",
+        "_rowGap": "var(--row-gap)",
+        "_padding:tablet_portrait": {
+          "left": "15",
+          "right": "15"
+        },
+        "_padding:mobile_landscape": {
+          "left": "0",
+          "right": "0"
         }
       },
-      "label": "Content Image Right"
+      "label": "Content Image"
+    },
+    {
+      "id": "imgcol",
+      "name": "container",
+      "parent": "con001",
+      "children": ["img001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "center",
+        "_gap": "24px",
+        "_width": "50%",
+        "_width:mobile_landscape": "100%"
+      },
+      "label": "Image Column"
+    },
+    {
+      "id": "img001",
+      "name": "image",
+      "parent": "imgcol",
+      "children": [],
+      "settings": {
+        "_width": "100%",
+        "image": {
+          "url": "https://picsum.photos/600",
+          "external": true,
+          "filename": "600"
+        }
+      },
+      "label": "Section Image"
     },
     {
       "id": "con002",
@@ -30,7 +70,12 @@
         "_alignItems": "flex-start",
         "_gap": "24px",
         "_width": "50%",
-        "_rowGap": "15"
+        "_rowGap": "var(--row-gap)",
+        "_width:mobile_landscape": "100%",
+        "_padding:mobile_landscape": {
+          "left": "15",
+          "right": "15"
+        }
       },
       "label": "Text Column"
     },
@@ -62,35 +107,6 @@
         "text": "Learn More",
         "style": "primary"
       }
-    },
-    {
-      "id": "imgcol",
-      "name": "container",
-      "parent": "con001",
-      "children": ["img001"],
-      "settings": {
-        "_direction": "row",
-        "_alignItems": "center",
-        "_justifyContent": "center",
-        "_gap": "24px",
-        "_width": "50%"
-      },
-      "label": "Image Column"
-    },
-    {
-      "id": "img001",
-      "name": "image",
-      "parent": "imgcol",
-      "children": [],
-      "settings": {
-        "_width": "100%",
-        "image": {
-          "url": "https://picsum.photos/600",
-          "external": true,
-          "filename": "600"
-        }
-      },
-      "label": "Section Image"
     }
   ]
 }

sections/features-3col-cards.json

@@ -0,0 +1,218 @@
+{
+  "title": "BCW — Features 3 Column Cards",
+  "type": "section",
+  "templateType": "section",
+  "global_classes": [
+    {
+      "id": "feature-card",
+      "name": "feature-card",
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-bg-alt)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-md)",
+          "right": "var(--space-md)",
+          "bottom": "var(--space-md)",
+          "left": "var(--space-md)"
+        },
+        "_border": {
+          "radius": {
+            "top": "8px",
+            "right": "8px",
+            "bottom": "8px",
+            "left": "8px"
+          }
+        }
+      },
+      "modified": 1741478400,
+      "user_id": 2
+    }
+  ],
+  "content": [
+    {
+      "id": "sec001",
+      "name": "container",
+      "parent": 0,
+      "children": ["con001", "con002"],
+      "settings": {
+        "_direction": "column",
+        "_gap": "40px",
+        "_margin": {
+          "top": "15",
+          "bottom": "15"
+        },
+        "_padding:mobile_portrait": {
+          "left": "15px",
+          "right": "15px"
+        }
+      },
+      "label": "Features 3 Column Cards"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["hdg001", "txt001"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "16px"
+      },
+      "label": "Section Header"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "tag": "h2",
+        "text": "Why Choose Us"
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "text": "A brief supporting statement that introduces this section to your visitors."
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con003", "con004", "con005"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "stretch",
+        "_justifyContent": "center",
+        "_gap": "32px",
+        "_columnGap": "var(--col-gap)",
+        "_rowGap:mobile_portrait": "var(--row-gap)"
+      },
+      "label": "Features Row"
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico001", "hdg002", "txt002"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature One"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "con003",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg002",
+      "name": "heading",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature One"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    },
+    {
+      "id": "con004",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico002", "hdg003", "txt003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature Two"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "con004",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg003",
+      "name": "heading",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature Two"
+      }
+    },
+    {
+      "id": "txt003",
+      "name": "text-basic",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    },
+    {
+      "id": "con005",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico003", "hdg004", "txt004"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature Three"
+    },
+    {
+      "id": "ico003",
+      "name": "icon",
+      "parent": "con005",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg004",
+      "name": "heading",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature Three"
+      }
+    },
+    {
+      "id": "txt004",
+      "name": "text-basic",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    }
+  ]
+}

sections/features-3col.json

@@ -10,7 +10,7 @@
         "_typography": {
           "text-align": "center"
         },
-        "_rowGap": "10px"
+        "_rowGap": "var(--row-gap)"
       },
       "modified": 1772146285,
       "user_id": 2
@@ -73,7 +73,7 @@
         "_alignItems": "flex-start",
         "_justifyContent": "center",
         "_gap": "32px",
-        "_rowGap:mobile_portrait": "15px"
+        "_rowGap:mobile_portrait": "var(--row-gap)"
       },
       "label": "Features Row"
     },

sections/features-4col.json

@@ -10,7 +10,7 @@
         "_typography": {
           "text-align": "center"
         },
-        "_rowGap": "10px"
+        "_rowGap": "var(--row-gap)"
       },
       "modified": 1772146285,
       "user_id": 2
@@ -73,7 +73,7 @@
         "_alignItems": "flex-start",
         "_justifyContent": "center",
         "_gap": "24px",
-        "_rowGap:mobile_portrait": "15px"
+        "_rowGap:mobile_portrait": "var(--row-gap)"
       },
       "label": "Features Row"
     },

sections/hero-card-homepage.json

@@ -0,0 +1,136 @@
+{
+  "title": "BCW — Hero Card",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "image": {
+            "url": "https://picsum.photos/1400/700",
+            "external": true,
+            "filename": "700"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-xl)",
+          "bottom": "var(--space-xl)"
+        }
+      },
+      "label": "Hero Card"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "flex-start",
+        "_width": "100%",
+        "_maxWidth": "100%"
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "con001",
+      "children": ["txt001", "hdg001", "txt002", "con003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "flex-start",
+        "_gap": "var(--space-md)",
+        "_width": "50%",
+        "_width:mobile_portrait": "100%",
+        "_margin": {
+          "left": "5%"
+        },
+        "_background": {
+          "color": {
+            "raw": "rgba(255, 255, 255, 0.88)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-lg)",
+          "right": "var(--space-lg)",
+          "bottom": "var(--space-lg)",
+          "left": "var(--space-lg)"
+        }
+      },
+      "label": "Content Card"
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "text": "YOUR EYEBROW LABEL",
+        "_typography": {
+          "color": {
+            "raw": "var(--color-primary)"
+          },
+          "font-weight": "600",
+          "letter-spacing": "2px"
+        }
+      },
+      "label": "Eyebrow"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "tag": "h1",
+        "text": "Your Hero Headline Goes Here"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "text": "Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused."
+      }
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["btn001", "btn002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_gap": "var(--space-sm)"
+      },
+      "label": "Buttons"
+    },
+    {
+      "id": "btn001",
+      "name": "button",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Get Started",
+        "style": "primary"
+      }
+    },
+    {
+      "id": "btn002",
+      "name": "button",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Learn More",
+        "style": "outline"
+      }
+    }
+  ]
+}

sections/hero-card-page.json

@@ -0,0 +1,79 @@
+{
+  "title": "BCW — Hero Card (Page)",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "image": {
+            "url": "https://picsum.photos/1400/700",
+            "external": true,
+            "filename": "700"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-xl)",
+          "bottom": "var(--space-xl)"
+        }
+      },
+      "label": "Hero Card (Page)"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "center",
+        "_width": "100%",
+        "_maxWidth": "100%"
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "con001",
+      "children": ["hdg001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "flex-start",
+        "_justifyContent": "center",
+        "_gap": "var(--space-md)",
+        "_width": "50%",
+        "_width:mobile_portrait": "100%",
+        "_background": {
+          "color": {
+            "raw": "rgba(255, 255, 255, 0.88)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-lg)",
+          "right": "var(--space-lg)",
+          "bottom": "var(--space-lg)",
+          "left": "var(--space-lg)"
+        }
+      },
+      "label": "Content Card"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "tag": "h1",
+        "text": "Page Title Goes Here",
+        "_typography": {
+          "text-align": "center"
+        }
+      }
+    }
+  ]
+}

sections/hero-simple.json

@@ -55,7 +55,7 @@
         "_justifyContent": "center",
 
         "_gap": "16px",
-        "_columnGap": "30"
+        "_columnGap": "var(--col-gap)"
       }
     },
     {