feat(ui): own responsive marketing layout APIs

packages/ui/components/SplitHero.wrn

@@ -20,6 +20,14 @@ component SplitHero {
     variant: string = "default"
     maxWidth: string = "xl"
     fullBleed: boolean = true
+    gutter: string = "md"
+    contentGutter: string = "md"
+    flushMobile: boolean = false
+    titleSize: string = "default"
+    titleMaxWidth: string = ""
+    descriptionWeight: string = "default"
+    mobileTitleSize: string = "default"
+    mobileStack: boolean = true
     backgroundImage: string = ""
     visualImage: string = ""
     visualAlt: string = ""
@@ -45,6 +53,8 @@ component SplitHero {
       data-variant='{variant}'
       data-max-width='{maxWidth}'
       data-full-bleed='{fullBleed ? "true" : "false"}'
+      data-gutter='{gutter}' data-content-gutter='{contentGutter}' data-flush-mobile='{flushMobile ? "true" : "false"}' data-title-size='{titleSize}' data-description-weight='{descriptionWeight}' data-mobile-title-size='{mobileTitleSize}' data-mobile-stack='{mobileStack ? "true" : "false"}'
+      style='--wrn-split-title-max-width: {titleMaxWidth || "18ch"}'
       data-visual-style='{visualStyle}'
       class='wrn-split-hero {class}'
     >
@@ -413,6 +423,7 @@ component SplitHero {
     }
 
     .wrn-split-hero__title {
+      max-width: var(--wrn-split-title-max-width);
       max-width: 15ch;
       margin: 1.45rem 0 0;
       color: var(--wrn-color-text);
@@ -421,6 +432,8 @@ component SplitHero {
       line-height: 1.02;
       letter-spacing: -0.05em;
     }
+    .wrn-split-hero[data-title-size="xl"] .wrn-split-hero__title { font-size: clamp(3rem, 5.5vw, 5rem); }
+    .wrn-split-hero[data-description-weight="medium"] .wrn-split-hero__description { font-weight: 500; }
 
     .wrn-split-hero[data-size="compact"] .wrn-split-hero__title,
     .wrn-split-hero[data-size="sm"] .wrn-split-hero__title {
@@ -771,6 +784,7 @@ component SplitHero {
       .wrn-split-hero[data-ratio="content"] .wrn-split-hero__layout {
         grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
       }
+      .wrn-split-hero[data-ratio="wide-copy"] .wrn-split-hero__layout { grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr); }
 
       .wrn-split-hero[data-ratio="visual"] .wrn-split-hero__layout {
         grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
@@ -786,6 +800,8 @@ component SplitHero {
     }
 
     @media (max-width: 639px) {
+      .wrn-split-hero[data-flush-mobile="false"] .wrn-split-hero__inner { width: calc(100% - 2rem); }
+      .wrn-split-hero[data-mobile-title-size="lg"] .wrn-split-hero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
       .wrn-split-hero__inner {
         padding-block: 3.25rem;
       }