1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[810],{9810:(e,t,r)=>{r.r(t),r.d(t,{default:()=>k});var n=r(5464),i=r(3968),a=r(8129),o=r(3077),s=r(7070);function l(e,t){[...t].reverse().forEach((r=>{const n=e.getVariant(r);n&&(0,o.U)(e,n),e.variantChildren&&e.variantChildren.forEach((e=>{l(e,t)}))}))}function c(){let e=!1;const t=new Set,r={subscribe:e=>(t.add(e),()=>{t.delete(e)}),start(r,n){(0,a.V)(e,"controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");const i=[];return t.forEach((e=>{i.push((0,s._)(e,r,{transitionOverride:n}))})),Promise.all(i)},set:r=>((0,a.V)(e,"controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook."),t.forEach((e=>{!function(e,t){Array.isArray(t)?l(e,t):"string"===typeof t?l(e,[t]):(0,o.U)(e,t)}(e,r)}))),stop(){t.forEach((e=>{!function(e){e.values.forEach((e=>e.stop()))}(e)}))},mount:()=>(e=!0,()=>{e=!1,r.stop()})};return r}var d=r(4930),p=r(293);const m=function(){const e=(0,d.M)(c);return(0,p.E)(e.mount,[]),e};var u=r(5043),h=r(579);const f=n.Ay.section` 2 padding: 3rem 2rem; 3 background: ${e=>{let{theme:t}=e;return t.backgroundAlt}}; 4 position: relative; 5 overflow: hidden; 6 7 &::before, &::after { 8 content: ''; 9 position: absolute; 10 width: 400px; 11 height: 400px; 12 border-radius: 50%; 13 background: linear-gradient(45deg, 14 ${e=>{let{theme:t}=e;return t.primary}}20, 15 ${e=>{let{theme:t}=e;return t.secondary}}20 16 ); 17 filter: blur(100px); 18 animation: pulse 8s ease-in-out infinite alternate; 19 } 20 21 &::before { 22 top: -200px; 23 left: -200px; 24 } 25 26 &::after { 27 bottom: -200px; 28 right: -200px; 29 animation-delay: -4s; 30 } 31 32 @keyframes pulse { 33 0% { transform: scale(1); opacity: 0.3; } 34 100% { transform: scale(1.2); opacity: 0.1; } 35 } 36`,g=(0,n.Ay)(i.P.div)` 37 text-align: center; 38 margin-bottom: 3rem; 39 position: relative; 40 41 h2 { 42 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 43 font-size: ${e=>{let{theme:t}=e;return t.sizes["2xl"]}}; 44 background: linear-gradient( 45 135deg, 46 ${e=>{let{theme:t}=e;return t.primary}}, 47 ${e=>{let{theme:t}=e;return t.secondary}} 48 ); 49 -webkit-background-clip: text; 50 -webkit-text-fill-color: transparent; 51 display: inline-block; 52 padding: 0.5rem 2rem; 53 position: relative; 54 transition: all 0.3s ease; 55 56 &::before { 57 content: ''; 58 position: absolute; 59 inset: 0; 60 padding: 2px; 61 border-radius: 30px; 62 background: linear-gradient( 63 135deg, 64 ${e=>{let{theme:t}=e;return t.primary}}, 65 ${e=>{let{theme:t}=e;return t.secondary}} 66 ); 67 -webkit-mask: 68 linear-gradient(#fff 0 0) content-box, 69 linear-gradient(#fff 0 0); 70 -webkit-mask-composite: xor; 71 mask-composite: exclude; 72 opacity: 0.5; 73 transition: opacity 0.3s ease; 74 } 75 76 &:hover { 77 transform: scale(1.05); 78 79 &::before { 80 opacity: 1; 81 } 82 } 83 } 84`,x=n.Ay.div` 85 max-width: 1000px; 86 margin: 0 auto; 87 display: grid; 88 grid-template-columns: repeat(4, 1fr); 89 gap: 1.5rem; 90 position: relative; 91 z-index: 1; 92 93 @media (max-width: 968px) { 94 grid-template-columns: repeat(2, 1fr); 95 gap: 1rem; 96 } 97 98 @media (max-width: 480px) { 99 grid-template-columns: repeat(1, 1fr); 100 max-width: 280px; 101 } 102`,b=(0,n.Ay)(i.P.div)` 103 background: ${e=>{let{theme:t}=e;return`linear-gradient(${t.card}, ${t.card}) padding-box,\n linear-gradient(135deg, ${t.primary}50, transparent) border-box`}}; 104 padding: 1rem; 105 border-radius: 16px; 106 box-shadow: ${e=>{let{theme:t}=e;return t.shadowMd}}; 107 text-align: center; 108 border: 2px solid transparent; 109 cursor: pointer; 110 position: relative; 111 backdrop-filter: blur(10px); 112 overflow: hidden; 113 114 &::before { 115 content: ''; 116 position: absolute; 117 inset: 0; 118 background: linear-gradient(135deg, 119 ${e=>{let{theme:t}=e;return t.primary}}10, 120 ${e=>{let{theme:t}=e;return t.secondary}}10 121 ); 122 opacity: 0; 123 transition: opacity 0.3s ease; 124 } 125 126 &::after { 127 content: ''; 128 position: absolute; 129 inset: -50%; 130 background: conic-gradient( 131 from 0deg, 132 transparent 0%, 133 ${e=>{let{theme:t}=e;return t.primary}}20 25%, 134 transparent 50% 135 ); 136 animation: rotate 4s linear infinite; 137 opacity: 0; 138 transition: opacity 0.3s ease; 139 } 140 141 &:hover { 142 transform: translateY(-5px) scale(1.02); 143 box-shadow: ${e=>{let{theme:t}=e;return`0 10px 20px ${t.primary}20`}}; 144 145 &::before { 146 opacity: 1; 147 } 148 149 &::after { 150 opacity: 1; 151 } 152 153 .icon { 154 transform: scale(1.1) rotate(10deg); 155 } 156 } 157 158 @keyframes rotate { 159 from { transform: rotate(0deg); } 160 to { transform: rotate(360deg); } 161 } 162 163 .icon { 164 font-size: 1.8rem; 165 background: ${e=>{let{color:t}=e;return`linear-gradient(135deg, ${t}, ${t}80)`}}; 166 color: white; 167 width: 35px; 168 height: 35px; 169 border-radius: 12px; 170 display: flex; 171 align-items: center; 172 justify-content: center; 173 margin: 0 auto 0.8rem; 174 transition: all 0.3s ease; 175 box-shadow: 0 4px 8px ${e=>{let{color:t}=e;return`${t}40`}}; 176 } 177 178 h3 { 179 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 180 font-size: ${e=>{let{theme:t}=e;return t.sizes.sm}}
180; 181 color: ${e=>{let{theme:t}=e;return t.text}}; 182 margin-bottom: 0.4rem; 183 font-weight: 600; 184 } 185 186 .number { 187 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 188 font-size: ${e=>{let{theme:t}=e;return t.sizes.xl}}; 189 background: linear-gradient(135deg, 190 ${e=>{let{color:t}=e;return t}}, 191 ${e=>{let{color:t}=e;return`${t}80`}} 192 ); 193 -webkit-background-clip: text; 194 -webkit-text-fill-color: transparent; 195 margin: 0.4rem 0; 196 font-weight: 700; 197 } 198`,y=e=>{let{end:t,duration:r=2e3}=e;const[n,a]=(0,u.useState)(0),o=m();return(0,u.useEffect)((()=>{let e,n=null;const i=o=>{n||(n=o);const s=Math.min((o-n)/r,1);a(Math.floor(s*t)),s<1&&(e=requestAnimationFrame(i))};return o.start({scale:[.5,1],opacity:[0,1]}),e=requestAnimationFrame(i),()=>{e&&cancelAnimationFrame(e)}}),[t,r,o]),(0,h.jsxs)(i.P.span,{animate:o,transition:{type:"spring",stiffness:100},children:[n.toLocaleString(),"+"]})},k=()=>(0,h.jsxs)(f,{id:"funfact",children:[(0,h.jsx)(g,{initial:{opacity:0,y:-20},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{duration:.5},children:(0,h.jsx)(i.P.h2,{whileHover:{scale:1.05},transition:{type:"spring",stiffness:300},children:"Fun Facts"})}),(0,h.jsx)(x,{children:[{icon:"\ud83d\ude0a",title:"Happy Clients",value:10,color:"#FF6B6B"},{icon:"\u2713",title:"Projects Done",value:15,color:"#4ECDC4"},{icon:"\u23f0",title:"Work Hours",value:1e3,color:"#45B7D1"},{icon:"\ud83d\udc65",title:"Team Works",value:5,color:"#96C93D"}].map(((e,t)=>(0,h.jsxs)(b,{color:e.color,initial:{opacity:0,scale:.8},whileInView:{opacity:1,scale:1},viewport:{once:!0},transition:{duration:.5,delay:.1*t,type:"spring",stiffness:100},whileHover:{scale:1.02},whileTap:{scale:.98},children:[(0,h.jsx)("div",{className:"icon",children:e.icon}),(0,h.jsx)("h3",{children:e.title}),(0,h.jsx)("div",{className:"number",children:(0,h.jsx)(y,{end:e.value})})]},t)))})]})}}]); 199//# sourceMappingURL=810.153cd90b.chunk.js.map
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.