{"version":3,"file":"ImageTextImageText.Da7hJD4F.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/1VZwzvB1oydFdBCvSNov/1aEqft9C5BZOHGNeIfIq/ImageTextImageText.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect,useRef}from\"react\";import{motion,useInView}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";/**\n * IMAGE TEXT CARDS — Framer Code Component\n *\n * 4 cards in a row (2×2 on mobile):\n *   Card 1 — image only (fills full card)\n *   Card 2 — text only (title + desc, left-aligned, vertically centred)\n *   Card 3 — image only (fills full card)\n *   Card 4 — text only (title + desc, left-aligned, vertically centred)\n * Scroll-direction-aware stagger animation.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ImageTextCards(props){const{card1Image,card2Title,card2Desc,card3Image,card4Title,card4Desc,titleFont,titleColor,descFont,descColor,cardBg,cardBorderColor,cardRadius,cardPadding,imagePadding,columnGap,titleDescGap}=props;// ── Mobile breakpoint ──\nconst[isMobile,setIsMobile]=useState(false);useEffect(()=>{const check=()=>setIsMobile(window.innerWidth<=1e3);check();window.addEventListener(\"resize\",check);return()=>window.removeEventListener(\"resize\",check);},[]);// ── Scroll direction tracking ──\nconst scrollDirRef=useRef(\"down\");const lastScrollY=useRef(0);useEffect(()=>{const onScroll=()=>{const y=window.scrollY;scrollDirRef.current=y>lastScrollY.current?\"down\":\"up\";lastScrollY.current=y;};window.addEventListener(\"scroll\",onScroll,{passive:true});return()=>window.removeEventListener(\"scroll\",onScroll);},[]);// ── Scroll-direction-aware visibility ──\nconst containerRef=useRef(null);const inView=useInView(containerRef,{once:false,amount:.2});const[visible,setVisible]=useState(false);useEffect(()=>{if(inView){setVisible(true);return;}if(scrollDirRef.current===\"up\")setVisible(false);},[inView]);const cardBase={flex:isMobile?\"0 0 auto\":1,width:isMobile?\"100%\":undefined,minWidth:0,backgroundColor:cardBg,borderRadius:cardRadius,border:`1px solid ${cardBorderColor}`,boxSizing:\"border-box\",overflow:\"hidden\"};const transition=i=>({type:\"tween\",duration:.9,ease:[.22,1,.36,1],delay:visible?i*.1:0});const textFadeIn=delayExtra=>({type:\"tween\",duration:.55,ease:[.22,1,.36,1],delay:visible?.35+delayExtra:0});return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:isMobile?\"column\":\"row\",gap:columnGap,boxSizing:\"border-box\",overflow:\"visible\",alignItems:\"stretch\"},children:[/*#__PURE__*/_jsx(motion.div,{initial:{y:60,opacity:0},animate:visible?{y:0,opacity:1}:{y:60,opacity:0},transition:transition(0),style:{...cardBase,padding:imagePadding},children:card1Image?.src&&/*#__PURE__*/_jsx(\"img\",{src:card1Image.src,alt:card1Image.alt??\"\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",borderRadius:Math.max(0,cardRadius-4)}})}),/*#__PURE__*/_jsxs(motion.div,{initial:{y:60,opacity:0},animate:visible?{y:0,opacity:1}:{y:60,opacity:0},transition:transition(1),style:{...cardBase,padding:cardPadding,display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",alignItems:isMobile?\"center\":undefined,textAlign:isMobile?\"center\":undefined,gap:titleDescGap},children:[card2Title&&/*#__PURE__*/_jsx(motion.p,{initial:{opacity:0,y:12},animate:visible?{opacity:1,y:0}:{opacity:0,y:12},transition:textFadeIn(0),style:{...titleFont,color:titleColor,margin:0},children:card2Title}),card2Desc&&/*#__PURE__*/_jsx(motion.p,{initial:{opacity:0,y:12},animate:visible?{opacity:1,y:0}:{opacity:0,y:12},transition:textFadeIn(.15),style:{...descFont,color:descColor,margin:0},children:card2Desc})]}),/*#__PURE__*/_jsx(motion.div,{initial:{y:60,opacity:0},animate:visible?{y:0,opacity:1}:{y:60,opacity:0},transition:transition(2),style:{...cardBase,padding:imagePadding},children:card3Image?.src&&/*#__PURE__*/_jsx(\"img\",{src:card3Image.src,alt:card3Image.alt??\"\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",borderRadius:Math.max(0,cardRadius-4)}})}),/*#__PURE__*/_jsxs(motion.div,{initial:{y:60,opacity:0},animate:visible?{y:0,opacity:1}:{y:60,opacity:0},transition:transition(3),style:{...cardBase,padding:cardPadding,display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",alignItems:isMobile?\"center\":undefined,textAlign:isMobile?\"center\":undefined,gap:titleDescGap},children:[card4Title&&/*#__PURE__*/_jsx(motion.p,{initial:{opacity:0,y:12},animate:visible?{opacity:1,y:0}:{opacity:0,y:12},transition:textFadeIn(0),style:{...titleFont,color:titleColor,margin:0},children:card4Title}),card4Desc&&/*#__PURE__*/_jsx(motion.p,{initial:{opacity:0,y:12},animate:visible?{opacity:1,y:0}:{opacity:0,y:12},transition:textFadeIn(.15),style:{...descFont,color:descColor,margin:0},children:card4Desc})]})]});}// ── Default props ──────────────────────────────────────────────────────────────\nImageTextCards.defaultProps={card2Title:\"Card two title\",card2Desc:\"Supporting description text goes here.\",card4Title:\"Card four title\",card4Desc:\"Supporting description text goes here.\",titleFont:{fontSize:18,fontWeight:700,lineHeight:1.2},titleColor:\"#111111\",descFont:{fontSize:14,fontWeight:400,lineHeight:1.6},descColor:\"#444444\",cardBg:\"#fafafa\",cardBorderColor:\"#ffffff\",cardRadius:12,cardPadding:24,imagePadding:16,columnGap:16,titleDescGap:10};// ── Property controls ──────────────────────────────────────────────────────────\naddPropertyControls(ImageTextCards,{// ── Card 1 — image only\ncard1Image:{type:ControlType.ResponsiveImage,title:\"Card 1 Image\"},// ── Card 2 — text only\ncard2Title:{type:ControlType.String,title:\"Card 2 Title\",defaultValue:\"Card two title\"},card2Desc:{type:ControlType.String,title:\"Card 2 Desc\",displayTextArea:true,defaultValue:\"\"},// ── Card 3 — image only\ncard3Image:{type:ControlType.ResponsiveImage,title:\"Card 3 Image\"},// ── Card 4 — text only\ncard4Title:{type:ControlType.String,title:\"Card 4 Title\",defaultValue:\"Card four title\"},card4Desc:{type:ControlType.String,title:\"Card 4 Desc\",displayTextArea:true,defaultValue:\"\"},// ── Title style\ntitleFont:{type:ControlType.Font,title:\"Title Font\",controls:\"extended\"},titleColor:{type:ControlType.Color,title:\"Title Color\",defaultValue:\"#111111\"},// ── Desc style\ndescFont:{type:ControlType.Font,title:\"Desc Font\",controls:\"extended\"},descColor:{type:ControlType.Color,title:\"Desc Color\",defaultValue:\"#444444\"},// ── Card styling\ncardBg:{type:ControlType.Color,title:\"Card BG\",defaultValue:\"#fafafa\"},cardBorderColor:{type:ControlType.Color,title:\"Card Border\",defaultValue:\"#ffffff\"},cardRadius:{type:ControlType.Number,title:\"Card Radius\",defaultValue:12,min:0,max:60,unit:\"px\",step:1},cardPadding:{type:ControlType.Number,title:\"Card Padding\",defaultValue:24,min:0,max:80,unit:\"px\",step:1},imagePadding:{type:ControlType.Number,title:\"Image Padding\",defaultValue:16,min:0,max:80,unit:\"px\",step:1},// ── Layout\ncolumnGap:{type:ControlType.Number,title:\"Gap\",defaultValue:16,min:0,max:80,unit:\"px\",step:1},titleDescGap:{type:ControlType.Number,title:\"Title → Desc\",defaultValue:10,min:0,max:40,unit:\"px\",step:1}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageTextCards\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageTextImageText.map"],"mappings":"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"}