{"version":3,"file":"Double_Teasers.DGe2AVML.mjs","names":["React.useId","React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/r6kQpRSTkCSZDcgstFFX/04UbOJVYYPLKkWlObZrt/Double_Teasers.js"],"sourcesContent":["// Dual Teaser Cards — Materio Labs + Materio platform explainer\n// Designed for lead magnet pages (e.g. wallpaper calculator)\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * DualTeaserCards\n *\n * Two side-by-side explainer cards that stack on mobile.\n * Left = soft greige card (Materio Labs positioning).\n * Right = dark midnight card (Materio platform positioning w/ CTA).\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicWidth 1200\n * @framerIntrinsicHeight 360\n */export default function DualTeaserCards(props){const{left={},right={},layout={}}=props;// ---- LEFT CARD (Materio Labs) ----\nconst{leftBg=\"#EAE8E1\",leftHeading=\"What is Materio Labs?\",leftBody=\"Materio Labs is a collection of free tools built for interior designers and design-build firms. No login required, no paywall — just resources that make the technical side of your work a little less painful.\",leftTextColor=\"#3F3934\",leftBodyColor=\"#6E6864\",leftShowCta=false,leftCtaText=\"Explore Materio Labs\",leftCtaHref=\"https://materio.co/labs\"}=left;// ---- RIGHT CARD (Materio platform) ----\nconst{rightBg=\"#3F3934\",rightEyebrow=\"RUNNING A DESIGN-BUILD FIRM?\",rightHeading=\"Materio connects your whole project — not just the wallpaper math.\",rightBody=\"Project management, procurement, client approvals, and invoicing — all in one place, built for the way designers actually work.\",rightTextColor=\"#F4F3EF\",rightBodyColor=\"rgba(244,243,239,0.72)\",rightEyebrowColor=\"rgba(244,243,239,0.55)\",rightShowCta=true,rightCtaText=\"See how it works\",rightCtaHref=\"https://materio.co/how-it-works\",rightCtaBg=\"#F4F3EF\",rightCtaColor=\"#3F3934\"}=right;// ---- LAYOUT / TYPOGRAPHY ----\nconst{gap=24,cardPadding=40,borderRadius=16,stackBreakpoint=720,headingFont={variant:\"Regular\",fontSize:\"32px\",letterSpacing:\"-0.01em\",lineHeight:\"1.15em\"},bodyFont={variant:\"Regular\",fontSize:\"16px\",letterSpacing:\"0em\",lineHeight:\"1.55em\"},eyebrowFont={variant:\"Medium\",fontSize:\"12px\",letterSpacing:\"0.08em\",lineHeight:\"1.4em\"}}=layout;// Unique class prefix per instance so multiple copies don't collide\nconst rawId=React.useId();const root=`mat-dt-${rawId.replace(/[^a-zA-Z0-9]/g,\"\")}`;// Track container width ourselves — @media queries are unreliable inside\n// Framer's wrappers, so we use ResizeObserver on the component's own width\n// and switch to single-column when we drop below `stackBreakpoint`.\nconst containerRef=React.useRef(null);const[isStacked,setIsStacked]=React.useState(false);React.useEffect(()=>{const el=containerRef.current;if(!el||typeof ResizeObserver===\"undefined\")return;const ro=new ResizeObserver(entries=>{for(const entry of entries){const w=entry.contentRect.width;setIsStacked(w<stackBreakpoint);}});ro.observe(el);// Set initial value synchronously on mount\nsetIsStacked(el.getBoundingClientRect().width<stackBreakpoint);return()=>ro.disconnect();},[stackBreakpoint]);const css=`\n        .${root} {\n            display: grid;\n            gap: ${gap}px;\n            width: 100%;\n            box-sizing: border-box;\n            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n        }\n        .${root} .mat-card {\n            border-radius: ${borderRadius}px;\n            padding: ${cardPadding}px;\n            display: flex;\n            flex-direction: column;\n            box-sizing: border-box;\n        }\n        .${root} .mat-card h3 {\n            font-family: 'PP Editorial New', 'Times New Roman', Georgia, serif;\n            margin: 0 0 16px 0;\n            font-weight: 400;\n        }\n        .${root} .mat-card p {\n            margin: 0;\n            font-weight: 400;\n            white-space: pre-line;\n        }\n        .${root} .mat-eyebrow {\n            display: block;\n            text-transform: uppercase;\n            font-weight: 500;\n            margin-bottom: 14px;\n        }\n        .${root} .mat-cta {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            margin-top: 28px;\n            padding: 14px 22px;\n            border-radius: 999px;\n            text-decoration: none;\n            font-weight: 500;\n            font-size: 14px;\n            letter-spacing: -0.005em;\n            width: fit-content;\n            transition: transform 0.2s ease, box-shadow 0.2s ease;\n        }\n        .${root} .mat-cta:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 8px 22px rgba(63,57,52,0.18);\n        }\n        .${root} .mat-cta-ghost {\n            padding: 0;\n            margin-top: 20px;\n            border-radius: 0;\n            background: transparent !important;\n            box-shadow: none !important;\n        }\n        .${root} .mat-cta-ghost:hover {\n            transform: translateX(3px);\n            box-shadow: none;\n        }\n    `;return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,className:root,style:{gridTemplateColumns:isStacked?\"1fr\":\"1fr 1fr\"},children:[/*#__PURE__*/_jsx(\"style\",{children:css}),/*#__PURE__*/_jsxs(\"div\",{className:\"mat-card\",style:{background:leftBg},children:[/*#__PURE__*/_jsx(\"h3\",{style:{...headingFont,color:leftTextColor},children:leftHeading}),/*#__PURE__*/_jsx(\"p\",{style:{...bodyFont,color:leftBodyColor},children:leftBody}),leftShowCta&&leftCtaText&&/*#__PURE__*/_jsxs(\"a\",{className:\"mat-cta mat-cta-ghost\",href:leftCtaHref,style:{color:leftTextColor},children:[leftCtaText,\" \",/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":true,children:\"→\"})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"mat-card\",style:{background:rightBg},children:[rightEyebrow&&/*#__PURE__*/_jsx(\"span\",{className:\"mat-eyebrow\",style:{...eyebrowFont,color:rightEyebrowColor},children:rightEyebrow}),/*#__PURE__*/_jsx(\"h3\",{style:{...headingFont,color:rightTextColor},children:rightHeading}),/*#__PURE__*/_jsx(\"p\",{style:{...bodyFont,color:rightBodyColor},children:rightBody}),rightShowCta&&rightCtaText&&/*#__PURE__*/_jsxs(\"a\",{className:\"mat-cta\",href:rightCtaHref,style:{background:rightCtaBg,color:rightCtaColor},children:[rightCtaText,\" \",/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":true,children:\"→\"})]})]})]});}addPropertyControls(DualTeaserCards,{left:{type:ControlType.Object,title:\"Left Card (Labs)\",controls:{leftHeading:{type:ControlType.String,title:\"Heading\",defaultValue:\"What is Materio Labs?\"},leftBody:{type:ControlType.String,title:\"Body\",defaultValue:\"Materio Labs is a collection of free tools built for interior designers and design-build firms. No login required, no paywall — just resources that make the technical side of your work a little less painful.\",displayTextArea:true},leftBg:{type:ControlType.Color,title:\"Background\",defaultValue:\"#EAE8E1\"},leftTextColor:{type:ControlType.Color,title:\"Heading Color\",defaultValue:\"#3F3934\"},leftBodyColor:{type:ControlType.Color,title:\"Body Color\",defaultValue:\"#6E6864\"},leftShowCta:{type:ControlType.Boolean,title:\"Show CTA\",defaultValue:false},leftCtaText:{type:ControlType.String,title:\"CTA Text\",defaultValue:\"Explore Materio Labs\",hidden:p=>!p.leftShowCta},leftCtaHref:{type:ControlType.String,title:\"CTA Link\",defaultValue:\"https://materio.co/labs\",hidden:p=>!p.leftShowCta}}},right:{type:ControlType.Object,title:\"Right Card (Materio)\",controls:{rightEyebrow:{type:ControlType.String,title:\"Eyebrow\",defaultValue:\"RUNNING A DESIGN-BUILD FIRM?\",description:\"Leave blank to hide\"},rightHeading:{type:ControlType.String,title:\"Heading\",defaultValue:\"Materio connects your whole project — not just the wallpaper math.\",displayTextArea:true},rightBody:{type:ControlType.String,title:\"Body\",defaultValue:\"Project management, procurement, client approvals, and invoicing — all in one place, built for the way designers actually work.\",displayTextArea:true},rightBg:{type:ControlType.Color,title:\"Background\",defaultValue:\"#3F3934\"},rightTextColor:{type:ControlType.Color,title:\"Heading Color\",defaultValue:\"#F4F3EF\"},rightBodyColor:{type:ControlType.Color,title:\"Body Color\",defaultValue:\"rgba(244,243,239,0.72)\"},rightEyebrowColor:{type:ControlType.Color,title:\"Eyebrow Color\",defaultValue:\"rgba(244,243,239,0.55)\"},rightShowCta:{type:ControlType.Boolean,title:\"Show CTA\",defaultValue:true},rightCtaText:{type:ControlType.String,title:\"CTA Text\",defaultValue:\"See how it works\",hidden:p=>!p.rightShowCta},rightCtaHref:{type:ControlType.String,title:\"CTA Link\",defaultValue:\"https://materio.co/how-it-works\",hidden:p=>!p.rightShowCta},rightCtaBg:{type:ControlType.Color,title:\"CTA Background\",defaultValue:\"#F4F3EF\",hidden:p=>!p.rightShowCta},rightCtaColor:{type:ControlType.Color,title:\"CTA Text Color\",defaultValue:\"#3F3934\",hidden:p=>!p.rightShowCta}}},layout:{type:ControlType.Object,title:\"Layout\",controls:{gap:{type:ControlType.Number,title:\"Gap\",defaultValue:24,min:0,max:80},cardPadding:{type:ControlType.Number,title:\"Card Padding\",defaultValue:40,min:16,max:80},borderRadius:{type:ControlType.Number,title:\"Corner Radius\",defaultValue:16,min:0,max:40},stackBreakpoint:{type:ControlType.Number,title:\"Stack Below\",defaultValue:720,min:400,max:1200,step:10,description:\"Screen width (px) at which cards stack\"},headingFont:{type:ControlType.Font,title:\"Heading Font\",controls:\"extended\",defaultValue:{variant:\"Regular\",fontSize:\"32px\",letterSpacing:\"-0.01em\",lineHeight:\"1.15em\"}},bodyFont:{type:ControlType.Font,title:\"Body Font\",controls:\"extended\",defaultValue:{variant:\"Regular\",fontSize:\"16px\",letterSpacing:\"0em\",lineHeight:\"1.55em\"}},eyebrowFont:{type:ControlType.Font,title:\"Eyebrow Font\",controls:\"extended\",defaultValue:{variant:\"Medium\",fontSize:\"12px\",letterSpacing:\"0.08em\",lineHeight:\"1.4em\"}}}}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DualTeaserCards\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerIntrinsicWidth\":\"1200\",\"framerIntrinsicHeight\":\"360\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Double_Teasers.map"],"mappings":"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"}