1import{r as o,j as e}from"./vendor-react-BQobPn2Z.js";import{H as b,x as y}from"./index-CtLIdj0S.js";import{g as n}from"./demo-gsap-gsKLY1uY.js";import{C as v}from"./chevron-left-ojeVKtd2.js";import"./vendor-commonjs-helpers-De8WaMV9.js";import"./vendor-react-dom-BVmTabbt.js";import"./admin-export-C610b6Gt.js";import"./vendor-radix-CoRXDypy.js";import"./vendor-charts-nXCWwiWB.js";import"./vendor-query-mhhVZALn.js";import"./vendor-router-C23-jnjR.js";import"./vendor-posthog-BfjysNwK.js";const i=[{title:"Shopify",logoColor:"#03403f",backgroundColor:"#c9e78a",keyframe:"wave-pear-effect",images:{one:"https://www.yudiz.com/codepen/fruity/pear-one.png",two:"https://www.yudiz.com/codepen/fruity/pear-two.png",three:"https://www.yudiz.com/codepen/fruity/pear-three.png",four:"https://www.yudiz.com/codepen/fruity/pear-four.png"}},{title:"Amazon",logoColor:"#ec4458",backgroundColor:"#ffb2b2",keyframe:"wave-apple-effect",images:{one:"https://www.yudiz.com/codepen/fruity/apple-one.png",two:"https://www.yudiz.com/codepen/fruity/apple-two.png",three:"https://www.yudiz.com/codepen/fruity/apple-three.png",four:"https://www.yudiz.com/codepen/fruity/apple-four.png"}},{title:"Walmart",logoColor:"#6464ff",backgroundColor:"#c1bff2",keyframe:"wave-exotic-effect",images:{one:"https://www.yudiz.com/codepen/fruity/exotic-one.png",two:"https://www.yudiz.com/codepen/fruity/exotic-two.png",three:"https://www.yudiz.com/codepen/fruity/exotic-three.png",four:"https://www.yudiz.com/codepen/fruity/exotic-four.png"}}],F=()=>{var f,d;const[r,l]=o.useState(0),a=o.useRef(0),m=o.useRef(null),s=o.useRef(null),c=o.useRef(null),p=o.useRef(null);o.useRef([]);const h=o.useRef(null),u=o.useRef(null);o.useEffect(()=>{n.from(".fruit-image",{y:"-100vh",delay:.5}),n.to(".fruit-image img",{x:"random(-20, 20)",y:"random(-20, 20)",zIndex:22,duration:2,ease:"none",yoyo:!0,repeat:-1})},[]);const g=()=>{a.current>-200&&(a.current-=100,m.current&&(m.current.style.left=`${a.current}%`),s.current&&(s.current.style.left=`${a.current}%`));const t=r+1;l(t),c.current&&n.to(c.current,{opacity:1,duration:1,color:i[t].logoColor}),p.current&&n.from(p.current,{y:"20%",opacity:0,duration:.5}),n.from(".fruit-image",{y:"-100vh",delay:.4,duration:.4})},x=()=>{a.current<0&&(a.current+=100,m.current&&(m.current.style.left=`${a.current}%`),s.current&&(s.current.style.left=`${a.current}%`,s.current.style.transition="all 0.5s ease-in-out"));const t=r-1;l(t),c.current&&n.to(c.current,{color:i[t].logoColor,duration:1}),p.current&&n.from(p.current,{y:"20%",opacity:0,duration:.5}),n.from(".fruit-image",{y:"100vh",delay:.5})};return e.jsxs(e.Fragment,{children:[e.jsx(b,{children:e.jsx("title",{children:"Framer | CPGIO"})}),e.jsxs("div",{className:"test-framer-container",children:[e.jsx("style",{children:` 2 @import url('https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap'); 3 4 .test-framer-container { 5 overflow: hidden !important; 6 font-family: 'Lexend', sans-serif; 7 width: 100vw; 8 height: 100vh; 9 position: fixed; 10 top: 0; 11 left: 0; 12 } 13 14 .test-framer-container * { 15 margin: 0; 16 padding: 0; 17 box-sizing: border-box; 18 } 19 20 .framer-header { 21 padding: 22px 28px 0; 22 position: fixed; 23 top: 0; 24 left: 0; 25 width: 100vw; 26 z-index: 99; 27 text-align: center; 28 } 29 30 .framer-logo { 31 font-size: 40px; 32 line-height: normal; 33 margin: 0; 34 font-weight: 900; 35 color: ${i[r].logoColor}; 36 transition: color 1s; 37 } 38 39 .framer-main { 40 width: 100vw; 41 height: 100vh; 42 position: relative; 43 } 44 45 .framer-text { 46 position: fixed; 47 width: 100%; 48 height: 100%; 49 top: 0; 50 left: 0; 51 pointer-events: none; 52 z-index: 5; 53 } 54 55 .framer-title { 56 font-size: clamp(100px, 20vw, 449px) !important; 57 line-height: normal !important; 58 color: white !important; 59 margin: 0 !important; 60 position: absolute; 61 top: 50%; 62 left: 50%; 63 transform: translate(-50%, -50%); 64 font-weight: 100; 65 z-index: 1; 66 } 67 68 .cane-image { 69 max-width: 265px; 70 position: absolute; 71 top: 50%; 72 left: 50%; 73 transform: translate(-50%, -50%); 74 mask-image: url(https://www.yudiz.com/codepen/fruity/cane.svg); 75 -webkit-mask-image: url(https://www.yudiz.com/codepen/fruity/cane.svg); 76 mask-repeat: no-repeat; 77 -webkit-mask-repeat: no-repeat; 78 mask-position: center center; 79 -webkit-mask-position: center center; 80 mask-size: 100% auto; 81 -webkit-mask-size: 100% auto; 82 overflow: hidden; 83 z-index: 10; 84 } 85 86 .cane-image > img { 87 width: 100%; 88 height: auto; 89 display: block; 90 max-width: none; 91 } 92 93 img.cane-labels { 94 position: absolute !important; 95 top: 0 !important; 96 left: 0; 97 width: 300% !important; 98 max-width: 300% !important; 99 height: auto !important; 100 mix-blend-mode: multiply; 101 transition: all ease-in-out 0.3s; 102 } 103 104 .section-container-main { 105 width: 100vw; 106 overflow: hidden; 107 position: fixed; 108 top: 0; 109 left: 0; 110 z-index: 0; 111 height: 100vh; 112 } 113 114 .section-container { 115 width: 300vw; 116 display: flex; 117 position: relative; 118 transition: all ease-in-out 0.5s; 119 align-items: center; 120 height: 100vh; 121 left: 0; 122 } 123 124 .section { 125 min-width: 100vw; 126 height: 100vh; 127 position: relative; 128 overflow: hidden; 129 } 130 131 .fruit-images { 132 position: relative; 133 width: 100%; 134 height: 100%; 135 } 136 137 .fruit-image { 138 opacity: 1; 139 position: absolute; 140 } 141 142 .fruit-image img { 143 width: 100%; 144 height: auto; 145 } 146 147 .image-one { 148 max-width: 282px; 149 bottom: 100px; 150 left: 0; 151 } 152 153 .image-two { 154 max-width: 247px; 155 top: 23%; 156 left: 25%; 157 } 158 159 .image-three { 160 max-width: 211px; 161 top: 23%; 162 right: 25%; 163 } 164 165 .image-four { 166 max-width: 294px; 167 bottom: 100px; 168 right: 0; 169 } 170 171 .fruit-image::after { 172 content: ''; 173 position: absolute; 174 background: linear-gradient(90deg, #000 3.66%, rgba(0, 0, 0, 0) 92.35%); 175 opacity: 0.43; 176 filter: blur(7.5px); 177 transform: rotate(-6.941deg); 178 right: 0; 179 width: 173px; 180 height: 30px; 181 } 182 183 .image-one::after { 184 bottom: -50px; 185 } 186 187 .image-two::after { 188 bottom: -200px; 189 height: 22px; 190 } 191 192 .image-three::after { 193 bottom: -280px; 194 width: 103px; 195 } 196 197 .image-four::after { 198 bottom: -50px; 199 } 200 201 .framer-button { 202 position: fixed; 203 top: 50%; 204 right: 30px; 205 z-index: 99; 206 transform: translateY(-50%); 207 border-radius: 50%; 208 height: 80px; 209 width: 80px; 210 background-color: white; 211 border: none; 212 transition: all ease-in-out 0.3s; 213 cursor: pointer; 214 display: flex; 215 align-items: center; 216 justify-content: center; 217 } 218 219 .framer-button:hover { 220 transform: translateY(-50%) scale(1.1); 221 } 222 223 .prev-button { 224 left: 30px; 225 right: unset; 226 } 227 228 .wave { 229 animation: ${i[r].keyframe} 4s linear infinite; 230 animation-direction: normal; 231 } 232 233 @keyframes wave-pear-effect { 234 0% { 235 box-shadow: 0 0 0 0px #c9e78a, 0 0 0 0px #c9e78a; 236 } 237 40% { 238 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px #c9e78a; 239 } 240 80% { 241 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); 242 } 243 100% { 244 box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); 245 } 246 } 247 248 @keyframes wave-apple-effect { 249 0% { 250 box-shadow: 0 0 0 0px #ffb2b2, 0 0 0 0px #ffb2b2; 251 } 252 40% { 253 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px #ffb2b2; 254 } 255 80% { 256 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); 257 } 258 100% { 259 box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); 260 } 261 } 262 263 @keyframes wave-exotic-effect { 264 0% { 265 box-shadow: 0 0 0 0px #c1bff2, 0 0 0 0px #c1bff2; 266 } 267 40% { 268 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 0px #c1bff2; 269 } 270 80% { 271 box-shadow: 0 0 0 50px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 0, 0, 0); 272 } 273 100% { 274 box-shadow: 0 0 0 0px rgba(60, 41, 188, 0), 0 0 0 30px rgba(0, 230, 118, 0); 275 } 276 } 277 278 @media screen and (max-width: 991px) { 279 .framer-button { 280 height: 80px; 281 width: 80px; 282 top: 90%; 283 } 284 } 285 286 @media screen and (max-width: 767px) { 287 .framer-button { 288 height: 60px; 289 width: 60px; 290 } 291 .framer-logo { 292 font-size: 30px; 293 } 294 } 295 `}),e.jsx("header",{className:"framer-header",children:e.jsx("h2",{ref:c,className:"framer-logo",children:"CPGIO"})}),e.jsxs("main",{className:"framer-main",children:[e.jsxs("div",{className:"framer-text",children:[e.jsx("h1",{ref:p,className:"framer-title",children:i[r].title}),e.jsxs("div",{className:"cane-image",children:[e.jsx("img",{src:"https://www.yudiz.com/codepen/fruity/cane.svg",alt:""}),e.jsx("img",{ref:m,src:"https://www.yudiz.com/codepen/fruity/Labels.jpg",alt:"",className:"cane-labels"})]})]}),e.jsx("div",{className:"section-container-main",children:e.jsx("div",{ref:s,className:"section-container",children:i.map((t,w)=>e.jsx("section",{className:"section",style:{backgroundColor:t.backgroundColor},children:e.jsxs("div",{className:"fruit-images",children:[e.jsx("div",{className:"image-one fruit-image",children:e.jsx("img",{src:t.images.one,alt:`${t.title}-image`})}),e.jsx("div",{className:"image-two fruit-image",children:e.jsx("img",{src:t.images.two,alt:`${t.title}-image`})}),e.jsx("div",{className:"image-three fruit-image",children:e.jsx("img",{src:t.images.three,alt:`${t.title}-image`})}),e.jsx("div",{className:"image-four fruit-image",children:e.jsx("img",{src:t.images.four,alt:`${t.title}-image`})})]})},w))})}),r>0&&e.jsx("button",{ref:u,onClick:x,className:"framer-button prev-button wave",style:{color:(f=i[r-1])==null?void 0:f.logoColor},children:e.jsx(v,{size:40})}),r<i.length-1&&e.jsx("button",{ref:h,onClick:g,className:"framer-button wave",style:{color:(d=i[r+1])==null?void 0:d.logoColor},children:e.jsx(y,{size:40})})]})]})]})};export{F as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.