{
  "format": 1,
  "slug": "layout-case-study-split",
  "title": "Case study split, image right",
  "description": "A white 660px split modal with the product screenshot on the right (a lavender panel with a bundled dashboard illustration - swap in your own): a customer logo line, the quote as the headline, one paragraph of context, two indigo result figures and an indigo Read the story button. For B2B and SaaS sites promoting a customer story.",
  "type": "image_and_content",
  "categories": [
    "engagement",
    "lead-capture"
  ],
  "season": "",
  "requires": {
    "pro": false,
    "plugins": []
  },
  "preview": "preview.webp",
  "images": [
    "art.svg"
  ],
  "popup": {
    "popup_name": "Case study split, image right",
    "wdpop_item_tab": {
      "popup_type": "image_and_content",
      "popup_image": "{{IMAGE:art.svg}}",
      "popup_image_layout": "right",
      "popup_title": "\"We stopped reconciling spreadsheets on Mondays.\"",
      "Popup_content": "<span class=\"wdpop-eyebrow\">Northwind Logistics</span><p>How a 40-person freight team cut their weekly close from six hours to forty minutes, without changing their ERP.</p><span class=\"wdpop-facts\"><span><strong>6h → 40m</strong><small>weekly close</small></span><span><strong>3 weeks</strong><small>to roll out</small></span></span>",
      "popup_close_text": "",
      "cta_link": {
        "url": "/customers/northwind/",
        "text": "Read the story",
        "target": ""
      },
      "popup_display_mode": "modal",
      "popup_width": "modal-custom-width",
      "popup_custom_width": {
        "width": "660",
        "unit": "px"
      },
      "popup_position": "wdpop_core_middle_center",
      "popup_style_accordions": {
        "style_bg": "#ffffff",
        "style_text": "#6b7280",
        "style_radius": "14",
        "style_padding": {
          "top": "38",
          "right": "34",
          "bottom": "38",
          "left": "34",
          "unit": "px"
        },
        "style_shadow": "large",
        "style_overlay_color": "#0f172a",
        "style_overlay_opacity": "55",
        "style_overlay_blur": "0",
        "style_heading_size": "25",
        "style_heading_weight": "800",
        "style_heading_color": "#111827",
        "style_body_size": "14",
        "style_align": "left",
        "style_cta_bg": {
          "color": "#4338ca",
          "hover": "#3730a3"
        },
        "style_cta_color": {
          "color": "#ffffff",
          "hover": "#ffffff"
        },
        "style_btn_radius": "8",
        "style_btn_font_size": "14",
        "style_btn_padding": {
          "top": "13",
          "right": "22",
          "bottom": "13",
          "left": "22",
          "unit": "px"
        },
        "style_btn_width": "auto",
        "close_btn_color": {
          "color": "#9ca3af",
          "hover": "#4b5563"
        },
        "close_btn_bg_color": {
          "color": "transparent",
          "hover": "transparent"
        },
        "close_btn_border_color": {
          "color": "transparent",
          "hover": "transparent"
        },
        "anim_in": "zoom",
        "anim_out": "fade",
        "anim_duration": "350",
        "style_mobile_heading_size": "22",
        "custom_css": "/* Image Layout = Right (row-reverse; the text stays first in the DOM), a 44% lavender screenshot column that shows the whole illustration on every width; logo line above the quote heading, two result figures under the copy. Selectors carry .wdpop-root so they outrank Pro's stylesheet, which loads after this CSS. */\n{{POPUP}}.wdpop-root{--wdpop-image-width:44%;--wdpop-image-min-height:425px;--wdpop-image-mobile-height:200px}\n{{POPUP}}.wdpop-root .modal-content{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden}\n{{POPUP}}.wdpop-root .wdpop-layout--right .wing--popup-image{background:#eef2ff}\n{{POPUP}}.wdpop-root .wdpop-layout--right .wing--popup-image img{object-fit:contain}\n{{POPUP}}.wdpop-root .wing--popup-content-wrap{display:flex;flex-direction:column;align-items:flex-start;text-align:var(--wdpop-align,left)}\n{{POPUP}}.wdpop-root .wing--popup-content{display:contents}\n{{POPUP}}.wdpop-root .wdpop-eyebrow{order:-1;display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;font-weight:800;color:#4338ca;line-height:1.3}\n{{POPUP}}.wdpop-root .wdpop-eyebrow::before{content:'';width:22px;height:22px;border-radius:6px;background:#4338ca;flex:0 0 auto}\n{{POPUP}}.wdpop-root .wing--popup-title{margin:0 0 12px;line-height:1.25;letter-spacing:-.01em}\n{{POPUP}}.wdpop-root .wing--popup-content p{margin:0 0 20px;line-height:1.65}\n{{POPUP}}.wdpop-root .wdpop-facts{display:flex;gap:22px;margin:0 0 22px}\n{{POPUP}}.wdpop-root .wdpop-facts strong{display:block;font-size:22px;font-weight:700;color:#4338ca;line-height:1.25}\n{{POPUP}}.wdpop-root .wdpop-facts small{display:block;font-size:12px;color:#9ca3af;line-height:1.5}\n{{POPUP}}.wdpop-root .wdpop-cta{order:8;margin:0;font-weight:700;line-height:1.2}\n{{POPUP}}.wdpop-root .wing--popup-close-btn{top:12px;right:14px;width:26px;height:26px;padding:0;border:0;line-height:26px;font-size:20px;text-align:center}"
      },
      "page_load_events": {
        "page_load_status": "1",
        "popup_delay": "0"
      },
      "frequency_events": {
        "freq_mode": "always"
      }
    }
  }
}