fix(ui): collapse empty navbar topbar and add CTA spacing

packages/ui/components/CTASection.wrn

@@ -8,6 +8,7 @@ component CTASection {
     size: string = "default"
     color: string = "primary"
     variant: string = "solid"
+    spacing: string = "none"
     primaryLabel: string = "Get started"
     primaryHref: string = "#"
     primaryIcon: string = ""
@@ -35,6 +36,7 @@ component CTASection {
       data-size='{size}'
       data-color='{color}'
       data-variant='{variant}'
+      data-spacing='{spacing}'
       data-max-width='{maxWidth}'
       data-full-bleed='{fullBleed ? "true" : "false"}'
       data-visual-position='{visualPosition}'
@@ -186,6 +188,18 @@ component CTASection {
       --cta-contrast: var(--wrn-color-secondary-contrast);
     }
 
+    .wrn-cta-section[data-spacing="sm"] {
+      padding-block: 2rem;
+    }
+
+    .wrn-cta-section[data-spacing="md"] {
+      padding-block: 3rem;
+    }
+
+    .wrn-cta-section[data-spacing="lg"] {
+      padding-block: 4rem;
+    }
+
     .wrn-cta-section[data-color="info"] {
       --cta-accent: var(--wrn-color-info);
       --cta-accent-hover: var(--wrn-color-info-hover);
@@ -223,6 +237,20 @@ component CTASection {
       margin-inline: auto;
     }
 
+    @media (max-width: 640px) {
+      .wrn-cta-section[data-spacing="sm"] {
+        padding-block: 1.5rem;
+      }
+
+      .wrn-cta-section[data-spacing="md"] {
+        padding-block: 2rem;
+      }
+
+      .wrn-cta-section[data-spacing="lg"] {
+        padding-block: 2.5rem;
+      }
+    }
+
     .wrn-cta-section[data-max-width="compact"] .wrn-cta-section__outer {
       width: min(calc(100% - 2rem), 64rem);
     }