1"use strict";(self.webpackChunkportsofzeki=self.webpackChunkportsofzeki||[]).push([[243],{2243:(e,t,r)=>{r.r(t),r.d(t,{default:()=>L});var i=r(5464),s=r(3968),n=r(3546),a=r(5043),o=r(4858),l=r(8403),d=r(899),c=r(8452),m=r(579);const h=d.Ik({name:d.Yj().required("Name is required").min(2,"Name must be at least 2 characters"),email:d.Yj().required("Email is required").email("Please enter a valid email"),subject:d.Yj().required("Subject is required").min(4,"Subject must be at least 4 characters"),message:d.Yj().required("Message is required").min(10,"Message must be at least 10 characters")}).required(),u=(0,i.Ay)(s.P.section)` 2 padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 2rem); 3 background: ${e=>{let{theme:t}=e;return t.background}}; 4 min-height: 80vh; 5 display: flex; 6 flex-direction: column; 7 justify-content: center; 8 position: relative; 9 overflow: hidden; 10 11 &::before { 12 content: ''; 13 position: absolute; 14 top: 0; 15 left: 0; 16 right: 0; 17 height: 1px; 18 background: ${e=>{let{theme:t}=e;return t.gradient}}; 19 opacity: 0.05; 20 clip-path: polygon(0 0%, 70% 0%, 100% 100%, 0% 100%); 21 } 22`,p=(0,i.Ay)(s.P.div)` 23 max-width: 1200px; 24 margin: 0 auto; 25 width: 100%; 26 position: relative; 27`,x=(0,i.Ay)(s.P.h2)` 28 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 29 font-size: ${e=>{let{theme:t}=e;return t.sizes["4xl"]}}; 30 text-align: center; 31 margin-bottom: 2rem; 32 background: ${e=>{let{theme:t}=e;return t.gradient}}; 33 -webkit-background-clip: text; 34 -webkit-text-fill-color: transparent; 35 position: relative; 36 37 &::after { 38 content: ''; 39 position: absolute; 40 bottom: -1rem; 41 left: 50%; 42 transform: translateX(-50%); 43 width: 60px; 44 height: 4px; 45 background: ${e=>{let{theme:t}=e;return t.gradient}}; 46 border-radius: 2px; 47 } 48`,g=(0,i.Ay)(s.P.p)` 49 text-align: center; 50 color: ${e=>{let{theme:t}=e;return t.textLight}}; 51 font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}}; 52 margin-bottom: 4rem; 53 max-width: 600px; 54 margin-left: auto; 55 margin-right: auto; 56`,y=(0,i.Ay)(s.P.div)` 57 display: grid; 58 grid-template-columns: 1fr 1.5fr; 59 gap: 3rem; 60 background: ${e=>{let{theme:t}=e;return t.card}}; 61 padding: clamp(2rem, 5vw, 3rem); 62 border-radius: 24px; 63 box-shadow: ${e=>{let{theme:t}=e;return t.shadowLg}}; 64 border: 1px solid ${e=>{let{theme:t}=e;return t.border}}; 65 backdrop-filter: blur(10px); 66 67 @media (max-width: 968px) { 68 grid-template-columns: 1fr; 69 } 70`,b=(0,i.Ay)(s.P.div)` 71 display: flex; 72 flex-direction: column; 73 gap: 2rem; 74`,j=(0,i.Ay)(s.P.div)` 75 padding: 1.5rem; 76 background: ${e=>{let{theme:t}=e;return t.backgroundAlt}}; 77 border-radius: 16px; 78 border: 1px solid ${e=>{let{theme:t}=e;return t.border}}; 79 transition: all ${e=>{let{theme:t}=e;return t.transition}}; 80 81 h3 { 82 ${e=>{let{theme:t}=e;return t.mixins.headingStyles}}; 83 font-size: ${e=>{let{theme:t}=e;return t.sizes.lg}}; 84 color: ${e=>{let{theme:t}=e;return t.primary}}; 85 margin-bottom: 0.5rem; 86 display: flex; 87 align-items: center; 88 gap: 0.75rem; 89 } 90 91 p { 92 ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}}; 93 color: ${e=>{let{theme:t}=e;return t.textLight}}; 94 font-size: ${e=>{let{theme:t}=e;return t.sizes.base}}; 95 } 96`,w=(0,i.Ay)(s.P.form)` 97 display: flex; 98 flex-direction: column; 99 gap: 1.5rem; 100 101 max-width:500px 102`,f=(0,i.Ay)(s.P.div)` 103 display: flex; 104 flex-direction: column; 105 gap: 0.5rem; 106`,v=i.Ay.label` 107 ${e=>{let{theme:t}=e;return t.mixins.bodyStyles}}; 108 color: ${e=>{let{theme:t}=e;return t.text}}; 109 font-size: ${e=>{let{theme:t}=e;return t.sizes.sm}}; 110 font-weight: ${e=>{let{theme:t}=e;return t.weights.medium}}; 111 display: flex; 112 align-items: center; 113 gap: 0.5rem; 114`,k=i.Ay.div` 115 position: relative; 116`,$=(0,i.Ay)(s.P.input)` 117 width: 100%; 118 padding: 0.875rem 1rem; 119 border: 2px solid ${e=>{let{theme:t,error:r}=e;return r?t.error:t.border}}; 120 border-radius: 12px; 121 background: ${e=>{let{theme:t}=e;return t.backgroundAlt}}; 122 color: ${e=>{let{theme:t}=e;return t.text}}; 123 font-size: ${e=>{let{theme:t}=e;return t.sizes.base}}; 124 transition: all ${e=>{let{theme:t}=e;return t.transition}}; 125 126 &:focus { 127 outline: none; 128 border-color: ${e=>{let{theme:t}=e;return t.primary}}; 129 box-shadow: 0 0 0 4px ${e=>{let{theme:t}=e;return t.primary}}20; 130 } 131`,z=(0,i.Ay)($).attrs({as:"textarea"})` 132 min-height: 150px; 133 resize: vertical; 134`,A=(0,i.Ay)(s.P.span)` 135 color: ${e=>{let{theme:t}=e;return t.error}}; 136 font-size: ${e=>{let{theme:t}=e;return t.sizes.sm}}
136; 137 margin-top: 0.25rem; 138`,P=(0,i.Ay)(s.P.button)` 139 padding: 1rem 2rem; 140 background: ${e=>{let{theme:t}=e;return t.gradient}}; 141 border: none; 142 border-radius: 12px; 143 color: white; 144 font-weight: ${e=>{let{theme:t}=e;return t.weights.semibold}}; 145 font-size: ${e=>{let{theme:t}=e;return t.sizes.base}}; 146 cursor: pointer; 147 display: flex; 148 align-items: center; 149 justify-content: center; 150 gap: 0.75rem; 151 transition: all ${e=>{let{theme:t}=e;return t.transition}}; 152 position: relative; 153 overflow: hidden; 154 155 &:disabled { 156 opacity: 0.7; 157 cursor: not-allowed; 158 } 159 160 &::before { 161 content: ''; 162 position: absolute; 163 top: 0; 164 left: 0; 165 width: 100%; 166 height: 100%; 167 background: ${e=>{let{theme:t}=e;return t.gradientAlt}}; 168 opacity: 0; 169 transition: opacity ${e=>{let{theme:t}=e;return t.transition}}; 170 } 171 172 &:hover::before { 173 opacity: 1; 174 } 175 176 span, svg { 177 position: relative; 178 z-index: 1; 179 } 180 181 svg { 182 width: 1.2rem; 183 height: 1.2rem; 184 } 185`,S=(0,i.Ay)(s.P.div)` 186 width: 1.2rem; 187 height: 1.2rem; 188 border: 2px solid #ffffff; 189 border-top-color: transparent; 190 border-radius: 50%; 191`,F=(0,i.Ay)(s.P.div)` 192 position: fixed; 193 top: 2rem; 194 right: 2rem; 195 padding: 1rem 2rem; 196 border-radius: 8px; 197 background: ${e=>{let{status:t,theme:r}=e;return"success"===t?r.success:r.error}}; 198 color: white; 199 font-size: ${e=>{let{theme:t}=e;return t.sizes.sm}}; 200 box-shadow: ${e=>{let{theme:t}=e;return t.shadowMd}}; 201 z-index: 1000; 202`,L=()=>{const{register:e,handleSubmit:t,formState:{errors:r},reset:i}=(0,o.mN)({resolver:(0,l.t)(h)}),[s,d]=(0,a.useState)(!1),[L,q]=(0,a.useState)(null),M=(0,a.useRef)(null);(0,a.useEffect)((()=>{c.Ay.init("mEvbFyIM0oKQyPc3S")}),[]);return(0,m.jsx)(u,{initial:{opacity:0}
202,animate:{opacity:1},exit:{opacity:0},children:(0,m.jsxs)(p,{children:[(0,m.jsx)(x,{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},transition:{duration:.6},children:"Get In Touch"}),(0,m.jsx)(g,{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},transition:{duration:.6,delay:.2},children:"Have a question or want to work together? Drop me a message below."}),(0,m.jsxs)(y,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.6,delay:.3},children:[(0,m.jsxs)(b,{children:[(0,m.jsxs)(j,{whileHover:{scale:1.02},children:[(0,m.jsxs)("h3",{children:[(0,m.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,m.jsx)("path",{d:"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"}),(0,m.jsx)("circle",{cx:"12",cy:"10",r:"3"})]}),"Location"]}),(0,m.jsx)("p",{children:"Ethiopia, Addis Ababa"})]}),(0,m.jsxs)(j,{whileHover:{scale:1.02},children:[(0,m.jsxs)("h3",{children:[(0,m.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,m.jsx)("path",{d:"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"}),(0,m.jsx)("polyline",{points:"22,6 12,13 2,6"})]}),"Email"]}),(0,m.jsx)("p",{children:"[email protected]"})]}),(0,m.jsxs)(j,{whileHover:{scale:1.02},children:[(0,m.jsxs)("h3",{children:[(0,m.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,m.jsx)("path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"})}),"Phone"]}),(0,m.jsx)("p",{children:"+251952892414"})]})]}),(0,m.jsxs)(w,{ref:M,onSubmit:t((async e=>{d(!0),q(null);try{const t={from_name:e.name,from_email:e.email,subject:e.subject,message:e.message};if(200!==(await c.Ay.send("service_tkozxzp","template_901pb0e",t)).status)throw new Error("Failed to send message");q("success"),i()}catch(t){q("error"),console.error("Error sending email:",t)}finally{d(!1)}})),children:[(0,m.jsxs)(f,{children:[(0,m.jsx)(v,{htmlFor:"name",children:"Name"}),(0,m.jsxs)(k,{children:[(0,m.jsx)($,{...e("name"),error:r.name,whileFocus:{scale:1.01}}),(0,m.jsxs)(n.N,{children:[r.name&&(0,m.jsx)(A,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},children:r.name.message}),L?(0,m.jsx)(F,{initial:{opacity:0,y:-20},animate:{opacity:1,y:0},exit:{opacity:0,y:-20},status:L,children:"success"===L?"Message sent successfully!":"Failed to send message. Please try again."}):null]})]})]}),(0,m.jsxs)(f,{children:[(0,m.jsx)(v,{htmlFor:"email",children:"Email"}),(0,m.jsxs)(k,{children:[(0,m.jsx)($,{...e("email"),error:r.email,whileFocus:{scale:1.01}}),(0,m.jsx)(n.N,{children:r.email&&(0,m.jsx)(A,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},children:r.email.message})})]})]}),(0,m.jsxs)(f,{children:[(0,m.jsx)(v,{htmlFor:"subject",children:"Subject"}),(0,m.jsxs)(k,{children:[(0,m.jsx)($,{...e("subject"),error:r.subject,whileFocus:{scale:1.01}}),(0,m.jsx)(n.N,{children:r.subject&&(0,m.jsx)(A,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},children:r.subject.message})})]})]}),(0,m.jsxs)(f,{children:[(0,m.jsx)(v,{htmlFor:"message",children:"Message"}),(0,m.jsxs)(k,{children:[(0,m.jsx)(z,{...e("message"),error:r.message,whileFocus:{scale:1.01}}),(0,m.jsx)(n.N,{children:r.message&&(0,m.jsx)(A,{initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},children:r.message.message})})]})]}),(0,m.jsx)(P,{type:"submit",disabled:s,whileHover:{scale:1.02},whileTap:{scale:.98},children:s?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(S,{animate:{rotate:360},transition:{duration:1,repeat:1/0,ease:"linear"}}),(0,m.jsx)("span",{children:"Sending..."})]}):(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)("span",{children:"Send Message"}),(0,m.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,m.jsx)("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),(0,m.jsx)("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})]})]})})]})]})]})})}}}]); 203//# sourceMappingURL=243.51c19c78.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.