Almost updated
This commit is contained in:
mukesh13
222
components/common/Careerform.jsx
Normal file
222
components/common/Careerform.jsx
Normal file
@ -0,0 +1,222 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Careerform() {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
roles: '',
|
||||
resume: null
|
||||
});
|
||||
const [uploadStatus, setUploadStatus] = useState('');
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[id]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFileUpload = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
// Validate file type
|
||||
const allowedTypes = ['.pdf', '.doc', '.docx'];
|
||||
const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
|
||||
|
||||
if (!allowedTypes.includes(fileExtension)) {
|
||||
setUploadStatus('Please upload a PDF, DOC, or DOCX file');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file size (5MB limit)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
setUploadStatus('File size must be less than 5MB');
|
||||
return;
|
||||
}
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
resume: file
|
||||
}));
|
||||
setUploadStatus(`${file.name} uploaded successfully`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic form validation
|
||||
if (!formData.fullName || !formData.email || !formData.phone || !formData.roles) {
|
||||
alert('Please fill in all required fields');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.resume) {
|
||||
alert('Please upload your resume');
|
||||
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);
|
||||
|
||||
// Replace with your actual API endpoint
|
||||
// fetch('/api/submit-application', {
|
||||
// method: 'POST',
|
||||
// body: submitData
|
||||
// }).then(response => {
|
||||
// // Handle response
|
||||
// });
|
||||
|
||||
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 = '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-title style-default -mb_11">
|
||||
<div className="section-contact style-default position-relative py-0">
|
||||
<div className="tf-container">
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="left">
|
||||
<div className="heading">
|
||||
<h2 className="mb_21 text_primary">
|
||||
Ready to join our team? Let's build something amazing together!
|
||||
</h2>
|
||||
</div>
|
||||
<div className="bot">
|
||||
<div className="content mb-0 ">
|
||||
<h6 className="text_primary">+91 90954 50005</h6>
|
||||
<p className="text-body-2 text_primary">
|
||||
Call us for career inquiries
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<form className="form-contact" onSubmit={handleSubmit}>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="fullName">
|
||||
Full Name*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Full Name"
|
||||
id="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="grid-2 gap_24">
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="email">
|
||||
Email Address*
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email address*"
|
||||
id="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="phone">
|
||||
Phone Number*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your phone number"
|
||||
id="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<fieldset className="">
|
||||
<label className="mb_15" htmlFor="roles">
|
||||
Roles of Interest*
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g., Frontend Developer, UI/UX Designer, Project Manager"
|
||||
id="roles"
|
||||
value={formData.roles}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
|
||||
{/* File Upload Section */}
|
||||
<div className="file-upload-section mt_20">
|
||||
<label className="link attachment" htmlFor="resume-upload" style={{ cursor: 'pointer' }}>
|
||||
<i className="icon-paperclip-solid" />
|
||||
{formData.resume ? `Selected: ${formData.resume.name}` : 'Upload CV*'}
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="resume-upload"
|
||||
accept=".pdf,.doc,.docx"
|
||||
onChange={handleFileUpload}
|
||||
style={{ display: 'none' }}
|
||||
required
|
||||
/>
|
||||
{uploadStatus && (
|
||||
<p className={`upload-status mt_10 ${uploadStatus.includes('successfully') ? 'text-success' : 'text-danger'}`}>
|
||||
{uploadStatus}
|
||||
</p>
|
||||
)}
|
||||
<small className="text-muted d-block mt_5">
|
||||
Accepted formats: PDF, DOC, DOCX (Max size: 5MB)
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="tf-btn btn-primary2 mt_22">
|
||||
<span>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>
|
||||
);
|
||||
}
|
||||
@ -2,43 +2,54 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Contact() {
|
||||
return (
|
||||
<div className="section-contact style-default position-relative">
|
||||
<div className="tf-container">
|
||||
<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" }}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6">
|
||||
<div className="left">
|
||||
<div className="heading">
|
||||
<div className="h1 split-text split-lines-rotation-x">
|
||||
Success is a team play, right? Let's work together!
|
||||
<div className="h1 split-text split-lines-rotation-x text-white">
|
||||
Let's Start Building Solutions Together
|
||||
</div>
|
||||
</div>
|
||||
<div className="bot">
|
||||
<div className="content">
|
||||
<h6 className="mb_5">+91 90954 50005</h6>
|
||||
<p className="text-body-2 text_mono-gray-6">
|
||||
Call us for urgent
|
||||
<h6 className="mb_5 text-white">+91 90954 50005</h6>
|
||||
<p className="text-body-2 text-white">
|
||||
Call us for urgent Inquiry
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/contact-us`} className="tf-btn btn-primary2 h36">
|
||||
<span className="text-caption">Get Direction</span>
|
||||
{/* <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>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-6">
|
||||
<form onSubmit={(e) => e.preventDefault()} className="form-contact">
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="name">
|
||||
<form onSubmit={(e) => e.preventDefault()} 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" }}>
|
||||
Full Name*
|
||||
</label>
|
||||
<input type="text" placeholder="Full Name" id="name" required />
|
||||
</fieldset>
|
||||
<div className="grid-2 gap_24">
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="email">
|
||||
<div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
|
||||
<fieldset style={{ marginBottom: "0px !important" }}>
|
||||
<label htmlFor="email" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
Email Address*
|
||||
</label>
|
||||
<input
|
||||
@ -48,21 +59,20 @@ export default function Contact() {
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label className="mb_15" htmlFor="phone">
|
||||
<fieldset style={{ marginBottom: "0px !important" }}>
|
||||
<label htmlFor="phone" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
Phone Number
|
||||
<span className="text_mono-gray-5">(Optional)</span>
|
||||
<span style={{ opacity: "0.6", color: "black" }}> (Optional)</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Your phone number"
|
||||
id="phone"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
<fieldset className="">
|
||||
<label className="mb_15" htmlFor="message">
|
||||
<fieldset style={{ marginBottom: "5px !important" }}>
|
||||
<label htmlFor="message" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
@ -72,11 +82,11 @@ export default function Contact() {
|
||||
defaultValue={""}
|
||||
/>
|
||||
</fieldset>
|
||||
<a href="#" className="link attachment">
|
||||
<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 mt_27">
|
||||
<button type="submit" className="tf-btn btn-primary2">
|
||||
<span>Send Message</span>
|
||||
<span className="bg-effect" />
|
||||
</button>
|
||||
@ -84,14 +94,14 @@ export default function Contact() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shape position-absolute">
|
||||
{/* <div className="shape position-absolute">
|
||||
<Image
|
||||
alt="item"
|
||||
src="/images/item/shape-5.png"
|
||||
width={1105}
|
||||
height={720}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,7 @@ export default function Testimonials() {
|
||||
<div className="col-lg-6">
|
||||
<div className="wrap">
|
||||
<div className="heading-section">
|
||||
<h2 className="heading-title split-text split-lines-rotation-x">
|
||||
<h2 className="heading-title split-text split-lines-rotation-x text_primary">
|
||||
Client Satisfaction, Our Reputation
|
||||
</h2>
|
||||
<p
|
||||
|
||||
Reference in New Issue
Block a user