diff --git a/public/assets/images/careers/left-img.webp b/public/assets/images/careers/left-img.webp index 563282e..0c87662 100644 Binary files a/public/assets/images/careers/left-img.webp and b/public/assets/images/careers/left-img.webp differ diff --git a/src/app/globals.css b/src/app/globals.css index 247a009..a496e47 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16418,4 +16418,103 @@ h4.service-details__dynamic-content-erp { .blog-section-one .row { justify-content: center; } -} \ No newline at end of file +} + +.custom-file-upload { + position: relative; + width: 100%; + margin-top: 10px; +} + +.hidden-file-input { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.file-upload-label { + display: flex !important; + align-items: center; + justify-content: space-between; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1.5px dashed rgba(255, 255, 255, 0.15); + border-radius: 15px; + padding: 18px 24px; + cursor: pointer; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + min-height: 70px; + position: relative; + overflow: hidden; +} + +.file-upload-label:hover { + background: rgba(255, 255, 255, 0.08); + border-color: var(--pelocis-base, #3779b9); + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.file-upload-content { + display: flex; + align-items: center; + gap: 18px; + color: rgba(255, 255, 255, 0.85); + flex-grow: 1; + overflow: hidden; +} + +.file-upload-content i { + font-size: 28px; + color: var(--pelocis-base, #3779b9); + transition: all 0.3s ease; +} + +.file-upload-label:hover .file-upload-content i { + transform: scale(1.1) rotate(-5deg); +} + +.file-name { + font-size: 16px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 280px; + letter-spacing: 0.3px; +} + +.file-upload-browse { + background: #3779b9; + color: #fff; + padding: 10px 22px; + border-radius: 10px; + font-size: 13px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + flex-shrink: 0; + box-shadow: 0 4px 15px rgba(55, 121, 185, 0.3); +} + +.file-upload-label:hover .file-upload-browse { + background: #3779b9; + transform: scale(1.05); + box-shadow: 0 6px 20px rgba(55, 121, 185, 0.5); +} + +.form-one__control--full .text-danger { + display: block; + margin-top: 10px; + font-size: 14px; + font-weight: 600; + color: #FFF; + animation: fadeIn 0.3s ease; +} diff --git a/src/components/careers/CareersForm.tsx b/src/components/careers/CareersForm.tsx index 134c595..ab3537c 100644 --- a/src/components/careers/CareersForm.tsx +++ b/src/components/careers/CareersForm.tsx @@ -113,7 +113,7 @@ const CareersForm = () => { if (!formData.email.trim()) errors.email = "Email is required."; if (!formData.phone.trim()) errors.phone = "Phone is required."; if (!formData.position.trim()) errors.position = "Please select a position."; - // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; + if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; if (!resumeFile) errors.resume = "Please upload your resume."; setFormErrors(errors); @@ -321,20 +321,22 @@ const CareersForm = () => { > - {/*
+
{formErrors.captcha && {formErrors.captcha}} -
*/} +
+
-
+