Logo update
This commit is contained in:
mukesh13
@ -12,6 +12,8 @@ export default function Careerform() {
|
||||
resume: null
|
||||
});
|
||||
const [uploadStatus, setUploadStatus] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
@ -39,15 +41,25 @@ export default function Careerform() {
|
||||
return;
|
||||
}
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: file
|
||||
}));
|
||||
setUploadStatus(`${file.name} uploaded successfully`);
|
||||
// Convert file to base64
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const base64 = reader.result.split(',')[1]; // Remove data:mime;base64, prefix
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: {
|
||||
name: file.name,
|
||||
data: base64,
|
||||
type: file.type
|
||||
}
|
||||
}));
|
||||
setUploadStatus(`${file.name} uploaded successfully`);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic form validation
|
||||
@ -61,40 +73,47 @@ export default function Careerform() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Here you would typically send the form data to your backend
|
||||
console.log('Form submitted:', formData);
|
||||
|
||||
// Example of how you might handle the form submission
|
||||
const submitData = new FormData();
|
||||
submitData.append('fullName', formData.fullName);
|
||||
submitData.append('email', formData.email);
|
||||
submitData.append('phone', formData.phone);
|
||||
submitData.append('roles', formData.roles);
|
||||
submitData.append('resume', formData.resume);
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
// Replace with your actual API endpoint
|
||||
// fetch('/api/submit-application', {
|
||||
// method: 'POST',
|
||||
// body: submitData
|
||||
// }).then(response => {
|
||||
// // Handle response
|
||||
// });
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'career',
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
alert('Application submitted successfully!');
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roles: '',
|
||||
resume: null
|
||||
});
|
||||
setUploadStatus('');
|
||||
|
||||
// Reset file input
|
||||
const fileInput = document.getElementById('resume-upload');
|
||||
if (fileInput) fileInput.value = '';
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roles: '',
|
||||
resume: null
|
||||
});
|
||||
setUploadStatus('');
|
||||
|
||||
// Reset file input
|
||||
const fileInput = document.getElementById('resume-upload');
|
||||
if (fileInput) fileInput.value = '';
|
||||
} else {
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setTimeout(() => setSubmitStatus(null), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -120,6 +139,20 @@ export default function Careerform() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
{submitStatus && (
|
||||
<div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
|
||||
padding: '10px 15px',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
|
||||
color: submitStatus === 'success' ? '#155724' : '#721c24',
|
||||
border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
|
||||
}}>
|
||||
{submitStatus === 'success'
|
||||
? 'Application submitted successfully! We will review your application and get back to you soon.'
|
||||
: 'Failed to submit application. Please try again.'}
|
||||
</div>
|
||||
)}
|
||||
<form className="form-contact" onSubmit={handleSubmit}>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="fullName">
|
||||
@ -200,22 +233,22 @@ export default function Careerform() {
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="tf-btn btn-primary2 mt_22">
|
||||
<span>Submit Application</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-primary2 mt_22"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
opacity: isSubmitting ? 0.7 : 1,
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
<span>{isSubmitting ? 'Submitting...' : 'Submit Application'}</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="shape position-absolute">
|
||||
<Image
|
||||
alt="item"
|
||||
src="/images/item/shape-5.png"
|
||||
width={1105}
|
||||
height={720}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,9 +1,63 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Contact() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitStatus, setSubmitStatus] = useState(null);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setSubmitStatus(null);
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'contact',
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitStatus('success');
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: ''
|
||||
});
|
||||
} else {
|
||||
setSubmitStatus('error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
setSubmitStatus('error');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
setTimeout(() => setSubmitStatus(null), 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="section-contact style-default position-relative" style={{ paddingLeft: "30px", paddingRight: "30px" }}>
|
||||
<div className="tf-container-2" style={{ padding:"30px", background: "linear-gradient(89.8deg, #ff3a2d -0.43%, #ffa13f 100.84%)", borderRadius: "26px" }}>
|
||||
@ -22,30 +76,37 @@ export default function Contact() {
|
||||
Call us for urgent Inquiry
|
||||
</p>
|
||||
</div>
|
||||
{/* <Link
|
||||
href="https://maps.app.goo.gl/pznAE2GE6p3YUhrE7?g_st=com.google.maps.preview.copy"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="tf-btn btn-primary2 h36"
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
color: 'black',
|
||||
border: '1px solid #ddd'
|
||||
}}
|
||||
>
|
||||
<span className="text-caption" style={{ color: 'black' }}>Get Direction</span>
|
||||
<span className="bg-effect" />
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<form onSubmit={(e) => e.preventDefault()} className="form-contact" style={{ gap: "10px !important" }}>
|
||||
{submitStatus && (
|
||||
<div className={`alert mb-3 ${submitStatus === 'success' ? 'alert-success' : 'alert-danger'}`} style={{
|
||||
padding: '10px 15px',
|
||||
borderRadius: '5px',
|
||||
marginBottom: '20px',
|
||||
backgroundColor: submitStatus === 'success' ? '#d4edda' : '#f8d7da',
|
||||
color: submitStatus === 'success' ? '#155724' : '#721c24',
|
||||
border: `1px solid ${submitStatus === 'success' ? '#c3e6cb' : '#f5c6cb'}`
|
||||
}}>
|
||||
{submitStatus === 'success'
|
||||
? 'Message sent successfully! We will get back to you soon.'
|
||||
: 'Failed to send message. Please try again.'}
|
||||
</div>
|
||||
)}
|
||||
<form onSubmit={handleSubmit} className="form-contact" style={{ gap: "10px !important" }}>
|
||||
<fieldset style={{ marginBottom: "5px !important" }}>
|
||||
<label htmlFor="name" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
<label htmlFor="fullName" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
Full Name*
|
||||
</label>
|
||||
<input type="text" placeholder="Full Name" id="name" required />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
id="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
|
||||
<fieldset style={{ marginBottom: "0px !important" }}>
|
||||
@ -56,6 +117,8 @@ export default function Contact() {
|
||||
type="email"
|
||||
placeholder="Your email address*"
|
||||
id="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
@ -68,6 +131,8 @@ export default function Contact() {
|
||||
type="text"
|
||||
placeholder="Your phone number"
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
@ -79,29 +144,26 @@ export default function Contact() {
|
||||
className="message"
|
||||
placeholder="Write your message here..."
|
||||
id="message"
|
||||
defaultValue={""}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</fieldset>
|
||||
<a href="#" className="link attachment text-dark" style={{ marginBottom: "5px !important", display: "inline-block" }}>
|
||||
<i className="icon-paperclip-solid" />
|
||||
Add an attachment
|
||||
</a>
|
||||
<button type="submit" className="tf-btn btn-primary2">
|
||||
<span>Send Message</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="tf-btn btn-primary2"
|
||||
disabled={isSubmitting}
|
||||
style={{
|
||||
opacity: isSubmitting ? 0.7 : 1,
|
||||
cursor: isSubmitting ? 'not-allowed' : 'pointer'
|
||||
}}
|
||||
>
|
||||
<span>{isSubmitting ? 'Sending...' : 'Send Message'}</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="shape position-absolute">
|
||||
<Image
|
||||
alt="item"
|
||||
src="/images/item/shape-5.png"
|
||||
width={1105}
|
||||
height={720}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user