Phone: ${formData.phone}
Message: ${formData.message || "No additional message."}`, + to: "info@metatroncubesolutions.com", + senderName: "Metatroncube Careers Application", + recaptchaToken: captchaToken, + }; + + if (resumeBase64 && resumeFile) { + emailData.attachments = [ + { + filename: resumeFile.name, + path: resumeBase64, + }, + ]; + } + + try { + const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, { + headers: { "Content-Type": "application/json" }, + }); + setAlert({ + show: true, + type: "success", + message: res?.data?.message || "Application submitted successfully!", + }); + setFormData({ name: "", email: "", phone: "", position: defaultPosition, message: "" }); + setResumeFile(null); + setResumeBase64(null); + if (fileInputRef.current) fileInputRef.current.value = ""; + setCaptchaToken(null); + setFormErrors({}); + } catch (error) { + console.error("Error sending application:", error); + setAlert({ + show: true, + type: "danger", + message: "Failed to submit application. Please try again later.", + }); + } finally { + setIsSubmitting(false); + } + }; + + // Auto-hide alert + useEffect(() => { + if (alert.show) { + const t = setTimeout(() => setAlert((p) => ({ ...p, show: false })), 5000); + return () => clearTimeout(t); + } + }, [alert.show]); + + const handleReset = () => { + setFormData({ name: "", email: "", phone: "", position: defaultPosition, message: "" }); + setResumeFile(null); + setResumeBase64(null); + if (fileInputRef.current) fileInputRef.current.value = ""; + setCaptchaToken(null); + setFormErrors({}); + setAlert({ show: false, type: "", message: "" }); + }; + + const handleClose = () => { + handleReset(); + onClose(); + }; + + if (!mounted || !isOpen) return null; + + const modalContent = ( +
+
+ );
+
+ return typeof document !== "undefined"
+ ? createPortal(modalContent, document.body)
+ : null;
+};
+
+export default CareersContactPopup;
diff --git a/src/components/home/ProjectsSection.tsx b/src/components/home/ProjectsSection.tsx
index 8737020..c930bea 100644
--- a/src/components/home/ProjectsSection.tsx
+++ b/src/components/home/ProjectsSection.tsx
@@ -30,6 +30,8 @@ const projectsData = [
}
];
+import CareersContactPopup from '@/components/careers/CareersContactPopup';
+
const categories = [
{ label: "All Items", filter: "all" },
{ label: "Website Development", filter: "web" },
@@ -43,11 +45,26 @@ const categories = [
const ProjectsSection = () => {
const [hasMounted, setHasMounted] = useState(false);
const [activeFilter, setActiveFilter] = useState("all");
+ const [isPopupOpen, setIsPopupOpen] = useState(false);
+ const [selectedPosition, setSelectedPosition] = useState("");
useEffect(() => {
setHasMounted(true);
}, []);
+ const openPopup = (positionTitle: string, e?: React.MouseEvent) => {
+ if (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ setSelectedPosition(positionTitle);
+ setIsPopupOpen(true);
+ };
+
+ const closePopup = () => {
+ setIsPopupOpen(false);
+ };
+
const filteredProjects = projectsData.filter(project =>
activeFilter === "all" || project.category === activeFilter
);
@@ -109,19 +126,30 @@ const ProjectsSection = () => {
{filteredProjects.map((project) => (
e.stopPropagation()}>
+
+ {/* ── CLOSE BUTTON ── */}
+
+
+ {/* ── FORM PANEL ── */}
+
+
+
+
+
+
+ {alert.show && (
+ Apply Now
+
+
+ {alert.message}
+
+ )}
+
+
+
-
+
+
+
)}
openPopup(project.title, e)}>
@@ -136,6 +164,12 @@ const ProjectsSection = () => {