Initial commit of project without large files
This commit is contained in:
169
src/pages/AboutUs.jsx
Normal file
169
src/pages/AboutUs.jsx
Normal file
@@ -0,0 +1,169 @@
|
||||
import React from 'react';
|
||||
import CounterCard from '../components/CounterCard';
|
||||
import '../styles/AboutUs.css';
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
// Import background images
|
||||
import civilBg from "../assets/civil-bg.jpg";
|
||||
import mechanicalBg from "../assets/mechanical-bg.jpg";
|
||||
import electricalBg from "../assets/electrical-bg.jpg";
|
||||
import electromechanicalBg from "../assets/electromechanical-bg.jpg";
|
||||
import itBg from "../assets/it-bg.jpg";
|
||||
import renewableBg from "../assets/renewable-bg.jpg"; // renamed image
|
||||
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.2 }
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 }
|
||||
};
|
||||
|
||||
const AboutUs = () => {
|
||||
return (
|
||||
<>
|
||||
{/* HERO SECTION */}
|
||||
<section className="about-hero">
|
||||
<div className="hero-overlay">
|
||||
<h1>About Us</h1>
|
||||
<p className="hero-subtitle">Building the Nation with Precision & Excellence</p>
|
||||
<p className="mt-4 text-white text-lg italic">“Engineering the future, one project at a time.”</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SLOGAN BANNER */}
|
||||
<div className="bg-gradient-to-r from-blue-400 to-red-500 text-white text-center py-4 font-semibold text-lg tracking-wide shadow-md">
|
||||
Empowering Infrastructure. Enabling Progress. Elevating Lives.
|
||||
</div>
|
||||
|
||||
{/* MAIN ABOUT SECTION */}
|
||||
<section className="about-section px-6 lg:px-20 py-16">
|
||||
<div className="grid md:grid-cols-2 gap-12 items-start">
|
||||
{/* LEFT TEXT */}
|
||||
<div>
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">
|
||||
About Laxmi Civil Engineering Services Pvt. Ltd.
|
||||
</h2>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Laxmi Civil Engineering Services Pvt. Ltd. was established on <strong>15th August 1980</strong> as a partnership firm and later
|
||||
converted into a Private Limited Company on <strong>31st March 2000</strong>.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
For over four decades, LCEPL has been delivering exceptional engineering and construction services, making us one of the leading civil engineering solution providers in India.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
We specialize in major infrastructure projects such as portable water supply, irrigation, pumping stations, electromechanical works, and operation & maintenance.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Our leadership in these unique services has allowed us to establish a strong foothold in the central, western, and southern regions of India, while also expanding into the northern region.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
With a workforce of <strong>1300+ professionals</strong>, supported by advanced technology and an inspiring work environment, we continue to move forward with confidence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* COUNTERS */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="grid grid-cols-1 gap-6"
|
||||
>
|
||||
<motion.div variants={itemVariants}>
|
||||
<CounterCard count="45+" label="Years of Experience" icon="🎖️" className="bg-white shadow-lg border border-gray-200 px-4 py-3 rounded-lg" />
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<CounterCard count="18+" label="Number of States" icon="🗺️" className="bg-white shadow-lg border border-gray-200 px-4 py-3 rounded-lg" />
|
||||
</motion.div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<CounterCard count="50+" label="Clients" icon="🏭" className="bg-white shadow-lg border border-gray-200 px-4 py-3 rounded-lg" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* QUOTE BANNER */}
|
||||
<div className="bg-blue-100 text-blue-800 text-center py-6 text-xl font-semibold italic tracking-wide">
|
||||
“Driven by innovation, guided by integrity, delivering with passion.”
|
||||
</div>
|
||||
|
||||
{/* VISION & MISSION SECTION */}
|
||||
<motion.section initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 0.6 }} viewport={{ once: true }} className="relative py-20 px-4 md:px-8 lg:px-20 bg-gradient-to-br from-blue-900 to-blue-800 overflow-hidden">
|
||||
<motion.div initial={{ y: 30, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }} transition={{ duration: 0.6 }} viewport={{ once: true }} className="max-w-7xl mx-auto relative z-10">
|
||||
<h2 className="text-4xl font-bold text-center text-white mb-16 relative pb-2">
|
||||
<span className="relative inline-block">
|
||||
Vision & Mission
|
||||
<motion.span initial={{ scaleX: 0 }} whileInView={{ scaleX: 1 }} transition={{ duration: 0.6 }} viewport={{ once: true }} className="absolute bottom-0 left-0 w-full h-1 bg-red-500 z-0 transform origin-center" />
|
||||
</span>
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{/* Vision */}
|
||||
<motion.div initial={{ x: -50, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ duration: 0.5 }} viewport={{ once: true }} className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-blue-500 hover:border-blue-400">
|
||||
<div className="flex items-start mb-6">
|
||||
<div className="bg-blue-100 p-3 rounded-full mr-4">
|
||||
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Vision</h3>
|
||||
<p className="text-gray-700">To be a company at the forefront of engineering and construction, renowned for excellence, quality, performance, and reliability.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Mission */}
|
||||
<motion.div initial={{ x: 50, opacity: 0 }} whileInView={{ x: 0, opacity: 1 }} transition={{ duration: 0.5 }} viewport={{ once: true }} className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-red-500 hover:border-red-400">
|
||||
<div className="flex items-start mb-6">
|
||||
<div className="bg-blue-100 p-3 rounded-full mr-4">
|
||||
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Mission</h3>
|
||||
<p className="text-gray-700">To complete every project undertaken with sincerity, excellence, and in a time-bound manner, meeting all expectations of the client.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
{/* WORKING FIELDS SECTION */}
|
||||
<section className="working-fields px-6 lg:px-20 py-16 bg-gray-50">
|
||||
<h2 className="highlight-title text-4xl font-bold text-center mb-4 text-black">Expertise Across Multiple Sectors</h2>
|
||||
<p className="text-center text-gray-600 mb-12">Our multidisciplinary approach helps us lead across multiple domains.</p>
|
||||
|
||||
<div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ title: "Civil Engineering", icon: "🏗️", desc: "Urban infrastructure, roadworks, dams, WTPs, STPs, stormwater management, and structural development.", bg: civilBg },
|
||||
{ title: "Mechanical Engineering", icon: "⚙️", desc: "Fabrication, installation, and maintenance of industrial systems, heavy machinery, and automated solutions including SCADA.", bg: mechanicalBg },
|
||||
{ title: "Electrical Engineering", icon: "💡", desc: "Reliable installations, power distribution, and maintenance services.", bg: electricalBg },
|
||||
{ title: "Electromechanical & Instrumentation", icon: "🔌", desc: "Integration of mechanical and electrical systems for pumping stations and automation.", bg: electromechanicalBg },
|
||||
{ title: "Information Technology", icon: "💻", desc: "Project planning, GIS, data systems, and automation tools for smart engineering.", bg: itBg },
|
||||
{ title: "Renewable Energy", icon: "☀️", desc: "Solar, wind and sustainable energy solutions with advanced engineering support.", bg: renewableBg },
|
||||
].map((field, idx) => (
|
||||
<div key={idx} className="relative field-card rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all cursor-pointer bg-cover bg-center" style={{ backgroundImage: `url(${field.bg})` }}>
|
||||
<div className="absolute inset-0 bg-black/50"></div>
|
||||
<div className="relative p-6 flex flex-col items-center text-center text-white z-10">
|
||||
<div className="text-5xl mb-4">{field.icon}</div>
|
||||
<h3 className="text-xl font-bold mb-2">{field.title}</h3>
|
||||
<p>{field.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
200
src/pages/AddProjects.jsx
Normal file
200
src/pages/AddProjects.jsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const AddProjects = () => {
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [sector, setSector] = useState("");
|
||||
const [image, setImage] = useState(null);
|
||||
const [imagePreview, setImagePreview] = useState(null);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editProjectId, setEditProjectId] = useState(null);
|
||||
|
||||
const sectors = [
|
||||
{ label: "Water Supply", value: "water supply" },
|
||||
{ label: "Storm Water", value: "storm water" },
|
||||
{ label: "Electromechanical", value: "electromechanical" },
|
||||
{ label: "Real Estate / Buildings", value: "real estate / buildings" },
|
||||
{ label: "Tunnel", value: "tunnel" },
|
||||
{ label: "Roads", value: "roads" },
|
||||
{ label: "Wastewater / Sewerage ", value: "wastewater / sewerage " },
|
||||
{ label: "Irrigation", value: "irrigation" },
|
||||
{ label: "Renewable Energy", value: "renewable energy" }
|
||||
];
|
||||
|
||||
// Fetch all projects
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/projects`);
|
||||
setProjects(res.data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching projects", err);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
// Reset the form
|
||||
const resetForm = () => {
|
||||
setSector("");
|
||||
setImage(null);
|
||||
setImagePreview(null);
|
||||
setEditMode(false);
|
||||
setEditProjectId(null);
|
||||
};
|
||||
|
||||
// Handle image selection
|
||||
const handleImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
setImage(file);
|
||||
setImagePreview(file ? URL.createObjectURL(file) : null);
|
||||
};
|
||||
|
||||
// Handle form submit (add or update)
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!sector || (!editMode && !image)) {
|
||||
toast.error("Sector and image are required!");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("sector", sector);
|
||||
if (image) formData.append("image", image);
|
||||
|
||||
try {
|
||||
if (editMode) {
|
||||
await axios.post(`${process.env.REACT_APP_API_BASE_URL}/api/projects/update/${editProjectId}`, formData);
|
||||
toast.success("Project updated successfully!");
|
||||
} else {
|
||||
await axios.post(`${process.env.REACT_APP_API_BASE_URL}/api/projects`, formData);
|
||||
toast.success("Project added successfully!");
|
||||
}
|
||||
|
||||
resetForm();
|
||||
fetchProjects();
|
||||
} catch (err) {
|
||||
console.error("Failed to save project", err);
|
||||
toast.error("Error saving project");
|
||||
}
|
||||
};
|
||||
|
||||
// Load project into form for editing
|
||||
const handleEdit = (project) => {
|
||||
setSector(project.sector);
|
||||
setImage(null);
|
||||
setImagePreview(`${process.env.REACT_APP_API_BASE_URL}${project.image}`);
|
||||
setEditMode(true);
|
||||
setEditProjectId(project.id);
|
||||
};
|
||||
|
||||
// Delete a project
|
||||
const handleDelete = async (id) => {
|
||||
if (!window.confirm("Are you sure you want to delete this project?")) return;
|
||||
|
||||
try {
|
||||
await axios.delete(`${process.env.REACT_APP_API_BASE_URL}/api/projects/${id}`);
|
||||
toast.success("Project deleted");
|
||||
fetchProjects();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete", err);
|
||||
toast.error("Failed to delete project");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 min-h-screen bg-gray-50">
|
||||
<h1 className="text-3xl font-bold text-blue-900 mb-6">
|
||||
{editMode ? "Edit Project" : "Add New Project"}
|
||||
</h1>
|
||||
|
||||
{/* FORM */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto bg-white p-6 rounded-lg shadow">
|
||||
<select
|
||||
value={sector}
|
||||
onChange={(e) => setSector(e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
>
|
||||
<option value="">Select Sector</option>
|
||||
{sectors.map((s) => (
|
||||
<option key={s.value} value={s.value}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
{imagePreview && (
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
className="h-48 w-full object-cover rounded"
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 bg-blue-900 text-white py-2 rounded hover:bg-blue-800"
|
||||
>
|
||||
{editMode ? "Update Project" : "Save Project"}
|
||||
</button>
|
||||
{editMode && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
className="flex-1 bg-gray-300 text-black py-2 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* PROJECT LIST */}
|
||||
<div className="mt-10">
|
||||
<h2 className="text-2xl font-semibold text-blue-800 mb-4">All Projects</h2>
|
||||
<div className="grid md:grid-cols-3 sm:grid-cols-2 gap-6">
|
||||
{projects.map((proj) => (
|
||||
<div
|
||||
key={proj.id}
|
||||
className="bg-white p-4 rounded-xl shadow hover:shadow-lg transition-all relative"
|
||||
>
|
||||
<img
|
||||
src={`${process.env.REACT_APP_API_BASE_URL}${proj.image}`}
|
||||
alt={proj.sector}
|
||||
className="h-56 w-full object-cover rounded mb-3"
|
||||
/>
|
||||
<p className="text-sm text-gray-700 capitalize mb-1">Sector: {proj.sector}</p>
|
||||
|
||||
<div className="flex justify-between mt-2">
|
||||
<button
|
||||
onClick={() => handleEdit(proj)}
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(proj.id)}
|
||||
className="text-red-600 hover:underline"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddProjects;
|
||||
25
src/pages/AdminGallery.jsx
Normal file
25
src/pages/AdminGallery.jsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
const AdminGallery = () => {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 py-16">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-4">Admin - Gallery</h2>
|
||||
<p className="text-gray-600 mb-6">Manage gallery images and media files here.</p>
|
||||
|
||||
{/* Example: Gallery cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
|
||||
{/* Replace with API dynamic mapping */}
|
||||
<div className="bg-gray-100 p-4 rounded-lg shadow">
|
||||
<img src="https://via.placeholder.com/300" alt="Gallery 1" className="rounded-md mb-2" />
|
||||
<p className="text-gray-700 font-medium">Project Image 1</p>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<button className="bg-blue-600 text-white px-3 py-1 rounded-md">Edit</button>
|
||||
<button className="bg-red-600 text-white px-3 py-1 rounded-md">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminGallery;
|
||||
97
src/pages/AdminHR.jsx
Normal file
97
src/pages/AdminHR.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
const AdminHR = () => {
|
||||
const [submissions, setSubmissions] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Fetch HR submissions from API
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get(`${process.env.REACT_APP_API_BASE_URL}/api/hr-submissions`)
|
||||
.then((res) => {
|
||||
setSubmissions(res.data || []);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error fetching HR submissions:', err);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleDelete = (id) => {
|
||||
if (window.confirm('Are you sure you want to delete this submission?')) {
|
||||
axios
|
||||
.delete(`${process.env.REACT_APP_API_BASE_URL}/api/hr-submissions/${id}`)
|
||||
.then(() => {
|
||||
setSubmissions(submissions.filter((sub) => sub.id !== id));
|
||||
})
|
||||
.catch((err) => console.error('Error deleting submission:', err));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 py-16">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-4">Admin - HR</h2>
|
||||
<p className="text-gray-600 mb-6">Manage HR contacts and career submissions.</p>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-gray-500">Loading submissions...</p>
|
||||
) : submissions.length === 0 ? (
|
||||
<p className="text-gray-500">No submissions found.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse border border-gray-200">
|
||||
<thead>
|
||||
<tr className="bg-blue-100 text-left">
|
||||
<th className="p-2 border">ID</th>
|
||||
<th className="p-2 border">Name</th>
|
||||
<th className="p-2 border">Email</th>
|
||||
<th className="p-2 border">Phone</th>
|
||||
<th className="p-2 border">Resume</th>
|
||||
<th className="p-2 border">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{submissions.map((sub, index) => (
|
||||
<tr key={sub.id || index} className="hover:bg-gray-50">
|
||||
<td className="p-2 border">{sub.id}</td>
|
||||
<td className="p-2 border">{sub.name}</td>
|
||||
<td className="p-2 border">{sub.email}</td>
|
||||
<td className="p-2 border">{sub.phone}</td>
|
||||
<td className="p-2 border">
|
||||
{sub.resume ? (
|
||||
<a href={sub.resume} target="_blank" rel="noopener noreferrer" className="text-blue-600 underline">
|
||||
View Resume
|
||||
</a>
|
||||
) : (
|
||||
'N/A'
|
||||
)}
|
||||
</td>
|
||||
<td className="p-2 border flex space-x-2">
|
||||
<a
|
||||
href={sub.resume || '#'}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-green-600 text-white px-3 py-1 rounded-md"
|
||||
>
|
||||
View
|
||||
</a>
|
||||
<button
|
||||
onClick={() => handleDelete(sub.id)}
|
||||
className="bg-red-600 text-white px-3 py-1 rounded-md"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminHR;
|
||||
45
src/pages/AdminLogin.jsx
Normal file
45
src/pages/AdminLogin.jsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
|
||||
export default function AdminLogin() {
|
||||
const [password, setPassword] = useState("");
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const from = location.state?.from?.pathname || "/admin"; // redirect after login
|
||||
|
||||
const handleLogin = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (password === "Laxmi@#$2026") {
|
||||
sessionStorage.setItem("admin", "true"); // session-based login
|
||||
navigate(from, { replace: true });
|
||||
} else {
|
||||
alert("Wrong password");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<form
|
||||
onSubmit={handleLogin}
|
||||
className="bg-white p-8 rounded shadow-md w-full max-w-sm"
|
||||
>
|
||||
<h2 className="text-xl font-bold mb-4">LCEPL ADMIN LOGIN</h2>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Enter LCEPL ADMIN password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full border px-3 py-2 rounded mb-4"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
src/pages/AdminPanel.jsx
Normal file
8
src/pages/AdminPanel.jsx
Normal file
@@ -0,0 +1,8 @@
|
||||
import React from "react";
|
||||
import { Outlet } from "react-router-dom";
|
||||
|
||||
const AdminPanel = () => {
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default AdminPanel;
|
||||
38
src/pages/AdminProjects.jsx
Normal file
38
src/pages/AdminProjects.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
|
||||
const AdminProjects = () => {
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto px-4 py-16">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-4">Admin - Projects</h2>
|
||||
<p className="text-gray-600 mb-6">Manage all your projects here.</p>
|
||||
|
||||
{/* Example: Projects Table */}
|
||||
<table className="w-full border-collapse border border-gray-200">
|
||||
<thead>
|
||||
<tr className="bg-blue-100 text-left">
|
||||
<th className="p-2 border">ID</th>
|
||||
<th className="p-2 border">Title</th>
|
||||
<th className="p-2 border">Location</th>
|
||||
<th className="p-2 border">Status</th>
|
||||
<th className="p-2 border">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* Replace with dynamic map from API */}
|
||||
<tr>
|
||||
<td className="p-2 border">1</td>
|
||||
<td className="p-2 border">Bridge Project</td>
|
||||
<td className="p-2 border">Mumbai</td>
|
||||
<td className="p-2 border">Ongoing</td>
|
||||
<td className="p-2 border">
|
||||
<button className="bg-blue-600 text-white px-3 py-1 rounded-md mr-2">Edit</button>
|
||||
<button className="bg-red-600 text-white px-3 py-1 rounded-md">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminProjects;
|
||||
414
src/pages/Apply.jsx
Normal file
414
src/pages/Apply.jsx
Normal file
@@ -0,0 +1,414 @@
|
||||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import { ApplicationContext } from '../context/ApplicationContext';
|
||||
|
||||
const Apply = () => {
|
||||
const { applications, setApplications } = useContext(ApplicationContext);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [credentials, setCredentials] = useState({ id: '', password: '' });
|
||||
const [formData, setFormData] = useState({
|
||||
positionName: '',
|
||||
qualification: '',
|
||||
experience: '',
|
||||
location: '',
|
||||
|
||||
expertise: '',
|
||||
skills: [],
|
||||
numberOfOpenings: '',
|
||||
jobDescription: '',
|
||||
postingDate: new Date().toISOString().split('T')[0],
|
||||
isActive: true,
|
||||
closingDate: '',
|
||||
});
|
||||
const [showApplications, setShowApplications] = useState(false);
|
||||
const [editIndex, setEditIndex] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get(`${process.env.REACT_APP_API_BASE_URL}/api/jobs`)
|
||||
.then((res) => {
|
||||
const currentDate = new Date();
|
||||
const updatedJobs = res.data.map(job => {
|
||||
if (job.closingDate && new Date(job.closingDate) < currentDate) {
|
||||
return { ...job, isActive: false };
|
||||
}
|
||||
return job;
|
||||
});
|
||||
setApplications(updatedJobs);
|
||||
})
|
||||
.catch((err) => console.error('Error fetching jobs:', err));
|
||||
}, [setApplications]);
|
||||
|
||||
const handleLogin = (e) => {
|
||||
e.preventDefault();
|
||||
if (credentials.id === 'HR' && credentials.password === 'HR@#$2026') {
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
alert('Invalid credentials. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
...(name === 'positionName' ? { skills: [] } : {}),
|
||||
}));
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
positionName: '',
|
||||
qualification: '',
|
||||
experience: '',
|
||||
location: '',
|
||||
|
||||
expertise: '',
|
||||
skills: [],
|
||||
numberOfOpenings: '',
|
||||
jobDescription: '',
|
||||
postingDate: new Date().toISOString().split('T')[0],
|
||||
isActive: true,
|
||||
closingDate: '',
|
||||
});
|
||||
setEditIndex(null);
|
||||
};
|
||||
|
||||
const handleApplicationSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const currentDate = new Date();
|
||||
const closingDate = formData.closingDate ? new Date(formData.closingDate) : null;
|
||||
const isActive = closingDate ? closingDate >= currentDate : formData.isActive;
|
||||
|
||||
const jobData = {
|
||||
...formData,
|
||||
isActive
|
||||
};
|
||||
|
||||
if (editIndex !== null) {
|
||||
const jobId = applications[editIndex].id;
|
||||
axios
|
||||
.put(`${process.env.REACT_APP_API_BASE_URL}/api/jobs/${jobId}`, jobData)
|
||||
.then((res) => {
|
||||
const updatedApps = [...applications];
|
||||
updatedApps[editIndex] = res.data.job;
|
||||
setApplications(updatedApps);
|
||||
resetForm();
|
||||
})
|
||||
.catch((err) => console.error('Error updating job:', err));
|
||||
} else {
|
||||
axios
|
||||
.post(`${process.env.REACT_APP_API_BASE_URL}/api/jobs`, jobData)
|
||||
.then((res) => {
|
||||
setApplications([...applications, res.data.job]);
|
||||
resetForm();
|
||||
})
|
||||
.catch((err) => console.error('Error creating job:', err));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
const jobId = applications[index].id;
|
||||
if (window.confirm('Are you sure you want to delete this job posting?')) {
|
||||
axios
|
||||
.delete(`${process.env.REACT_APP_API_BASE_URL}/api/jobs/${jobId}`)
|
||||
.then(() => {
|
||||
const updated = [...applications];
|
||||
updated.splice(index, 1);
|
||||
setApplications(updated);
|
||||
})
|
||||
.catch((err) => console.error('Error deleting job:', err));
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (index) => {
|
||||
setEditIndex(index);
|
||||
setFormData(applications[index]);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const toggleActiveStatus = (index) => {
|
||||
const job = applications[index];
|
||||
const updatedJob = { ...job, isActive: !job.isActive };
|
||||
|
||||
axios
|
||||
.put(`${process.env.REACT_APP_API_BASE_URL}/api/jobs/${job.id}`, updatedJob)
|
||||
.then((res) => {
|
||||
const updatedApps = [...applications];
|
||||
updatedApps[index] = res.data.job;
|
||||
setApplications(updatedApps);
|
||||
})
|
||||
.catch((err) => console.error('Error updating job status:', err));
|
||||
};
|
||||
|
||||
const filteredApplications = applications.filter((app) =>
|
||||
app.positionName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
app.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(Array.isArray(app.skills) && app.skills.some((skill) => skill.toLowerCase().includes(searchTerm.toLowerCase())))
|
||||
);
|
||||
|
||||
const handleLogout = () => {
|
||||
setIsAuthenticated(false);
|
||||
setCredentials({ id: '', password: '' });
|
||||
resetForm();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
|
||||
{!isAuthenticated ? (
|
||||
<div className="max-w-md mx-auto bg-white p-8 rounded-xl shadow-lg border border-gray-200">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">HR Portal Login</h2>
|
||||
<p className="text-gray-600 mt-2">Enter your credentials to access the job application system</p>
|
||||
</div>
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="id" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="id"
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
autoComplete="off"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
value={credentials.id}
|
||||
onChange={(e) => setCredentials({ ...credentials, id: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
autoComplete="new-password"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
value={credentials.password}
|
||||
onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Job Application Management</h1>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors text-sm font-medium"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Job Form */}
|
||||
<div className="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<h2 className="text-xl font-semibold text-gray-800">
|
||||
{editIndex !== null ? 'Edit Job Posting' : 'Create New Job Posting'}
|
||||
</h2>
|
||||
</div>
|
||||
<form onSubmit={handleApplicationSubmit} className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
|
||||
{/* Position */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Position *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="positionName"
|
||||
placeholder="Enter position name"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.positionName}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Qualification */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Qualification *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="qualification"
|
||||
placeholder="e.g. Bachelor's Degree"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.qualification}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Experience */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Experience *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="experience"
|
||||
placeholder="e.g. 3-5 years"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.experience}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Location */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Location *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="location"
|
||||
placeholder="e.g. New York, NY"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.location}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Number of Openings */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Number of Openings *</label>
|
||||
<input
|
||||
type="number"
|
||||
name="numberOfOpenings"
|
||||
placeholder="e.g. 2"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.numberOfOpenings}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Posting Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Posting Date *</label>
|
||||
<input
|
||||
type="date"
|
||||
name="postingDate"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.postingDate}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Closing Date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Closing Date (optional)</label>
|
||||
<input
|
||||
type="date"
|
||||
name="closingDate"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.closingDate}
|
||||
onChange={handleFormChange}
|
||||
min={formData.postingDate}
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
If set, position will automatically deactivate after this date
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Active Status */}
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="isActive"
|
||||
name="isActive"
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
checked={formData.isActive}
|
||||
onChange={(e) => setFormData({...formData, isActive: e.target.checked})}
|
||||
disabled={!!formData.closingDate}
|
||||
/>
|
||||
<label htmlFor="isActive" className="ml-2 block text-sm text-gray-700">
|
||||
Active Position
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Skills Multi-select */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Required Skills *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="skills"
|
||||
placeholder="Enter skills separated by commas (e.g. AutoCAD, Billing, Teamwork)"
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm"
|
||||
value={formData.skills.join(", ")}
|
||||
onChange={(e) =>
|
||||
setFormData({
|
||||
...formData,
|
||||
skills: e.target.value.split(",").map((s) => s.trim())
|
||||
})
|
||||
}
|
||||
/>
|
||||
{formData.skills.length > 0 && (
|
||||
<p className="mt-2 text-sm text-gray-500">
|
||||
Selected: <span className="font-medium">{formData.skills.join(', ')}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Job Description */}
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Job Description *</label>
|
||||
<textarea
|
||||
name="jobDescription"
|
||||
placeholder="Detailed description of the job..."
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm h-32"
|
||||
value={formData.jobDescription}
|
||||
onChange={handleFormChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Form Buttons */}
|
||||
<div className="md:col-span-2 flex justify-end space-x-3">
|
||||
{editIndex !== null && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
|
||||
>
|
||||
{editIndex !== null ? 'Update Job Posting' : 'Create Job Posting'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Job Postings List */}
|
||||
{/* Keep the table as before, just remove Salary column if needed */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Apply;
|
||||
24
src/pages/BlogDetail.jsx
Normal file
24
src/pages/BlogDetail.jsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Helmet } from "react-helmet";
|
||||
import blogs from "../data/blogs";
|
||||
|
||||
function BlogDetail() {
|
||||
const { slug } = useParams();
|
||||
const blog = blogs.find((b) => b.slug === slug);
|
||||
|
||||
if (!blog) return <h2>Blog not found</h2>;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<Helmet>
|
||||
<title>{blog.title}</title>
|
||||
<meta name="description" content={blog.description} />
|
||||
</Helmet>
|
||||
|
||||
<h1>{blog.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{ __html: blog.content }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogDetail;
|
||||
0
src/pages/BlogList.jsx
Normal file
0
src/pages/BlogList.jsx
Normal file
693
src/pages/Careers.jsx
Normal file
693
src/pages/Careers.jsx
Normal file
@@ -0,0 +1,693 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import careersBanner from '../assets/careers-banner.jpg';
|
||||
import careerImg from '../assets/career.jpg';
|
||||
|
||||
const Careers = () => {
|
||||
const navigate = useNavigate();
|
||||
const [jobs, setJobs] = useState([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(null);
|
||||
const [showContactForm, setShowContactForm] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
resume: null,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [jobsLoading, setJobsLoading] = useState(true);
|
||||
const [jobsError, setJobsError] = useState(null);
|
||||
const [searchFilters, setSearchFilters] = useState({
|
||||
position: '',
|
||||
skills: '',
|
||||
location: ''
|
||||
});
|
||||
const [filteredJobs, setFilteredJobs] = useState([]);
|
||||
const [activeOnly, setActiveOnly] = useState(true);
|
||||
|
||||
// useEffect(() => {
|
||||
// const handleShortcut = (e) => {
|
||||
// if (e.altKey && e.key.toLowerCase() === "n") {
|
||||
// navigate("/Apply");
|
||||
// }
|
||||
// };
|
||||
// document.addEventListener("keydown", handleShortcut);
|
||||
|
||||
// // Cleanup event listener on unmount
|
||||
// return () => {
|
||||
// document.removeEventListener("keydown", handleShortcut);
|
||||
// };
|
||||
// }, [navigate]);
|
||||
|
||||
// Fetch jobs from backend API
|
||||
useEffect(() => {
|
||||
const fetchJobs = async () => {
|
||||
try {
|
||||
setJobsLoading(true);
|
||||
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/api/jobs`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch jobs: ${response.status}`);
|
||||
}
|
||||
|
||||
const jobsData = await response.json();
|
||||
setJobs(jobsData);
|
||||
setJobsError(null);
|
||||
} catch (error) {
|
||||
console.error("Error fetching jobs:", error);
|
||||
setJobsError("Failed to load job openings. Please try again later.");
|
||||
} finally {
|
||||
setJobsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchJobs();
|
||||
}, []);
|
||||
|
||||
// Filter jobs based on search criteria
|
||||
useEffect(() => {
|
||||
const filtered = jobs.filter(job => {
|
||||
// Check position filter
|
||||
const positionMatch = searchFilters.position === '' ||
|
||||
job.positionName?.toLowerCase().includes(searchFilters.position.toLowerCase());
|
||||
|
||||
// Check skills filter
|
||||
const skillsMatch = searchFilters.skills === '' ||
|
||||
(Array.isArray(job.skills) &&
|
||||
job.skills.some(skill =>
|
||||
skill.toLowerCase().includes(searchFilters.skills.toLowerCase())
|
||||
));
|
||||
|
||||
// Check location filter
|
||||
const locationMatch = searchFilters.location === '' ||
|
||||
job.location?.toLowerCase().includes(searchFilters.location.toLowerCase());
|
||||
|
||||
// Check active status
|
||||
const isActive = !job.closingDate || new Date(job.closingDate) >= new Date();
|
||||
|
||||
return positionMatch && skillsMatch && locationMatch &&
|
||||
(!activeOnly || (activeOnly && job.isActive && isActive));
|
||||
});
|
||||
|
||||
setFilteredJobs(filtered);
|
||||
}, [jobs, searchFilters, activeOnly]);
|
||||
|
||||
const getDaysAgo = (dateString) => {
|
||||
if (!dateString) return 'Recently';
|
||||
|
||||
const postedDate = new Date(dateString);
|
||||
const currentDate = new Date();
|
||||
const timeDiff = currentDate - postedDate;
|
||||
const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (daysDiff === 0) return 'Today';
|
||||
if (daysDiff === 1) return '1 day ago';
|
||||
if (daysDiff < 7) return `${daysDiff} days ago`;
|
||||
if (daysDiff < 30) {
|
||||
const weeks = Math.floor(daysDiff / 7);
|
||||
return weeks === 1 ? '1 week ago' : `${weeks} weeks ago`;
|
||||
}
|
||||
if (daysDiff < 365) {
|
||||
const months = Math.floor(daysDiff / 30);
|
||||
return months === 1 ? '1 month ago' : `${months} months ago`;
|
||||
}
|
||||
const years = Math.floor(daysDiff / 365);
|
||||
return years === 1 ? '1 year ago' : `${years} years ago`;
|
||||
};
|
||||
|
||||
const handleToggle = (index) => {
|
||||
setSelectedIndex((prevIndex) => (prevIndex === index ? null : index));
|
||||
};
|
||||
|
||||
// const handleContactClick = () => {
|
||||
// setShowContactForm(!showContactForm);
|
||||
// };
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleFileChange = (e) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
resume: e.target.files[0] || null,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!formData.resume) {
|
||||
alert("Please upload your resume.");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = new FormData();
|
||||
data.append("fullName", formData.fullName);
|
||||
data.append("email", formData.email);
|
||||
data.append("phone", formData.phone);
|
||||
data.append("resume", formData.resume);
|
||||
|
||||
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/api/careers/contact`, {
|
||||
method: "POST",
|
||||
body: data,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(result.message || "Thank you for contacting our HR team. We will get back to you soon!");
|
||||
setFormData({
|
||||
fullName: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
resume: null,
|
||||
});
|
||||
setShowContactForm(false);
|
||||
} else {
|
||||
alert(result.error || "Failed to submit the form. Please try again.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
alert("Server error. Please try again later.");
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const benefits = [
|
||||
{ title: "Competitive Compensation", icon: "💰", description: "Industry-leading salaries and performance bonuses" },
|
||||
{ title: "Professional Growth", icon: "📈", description: "Continuous learning opportunities and career advancement paths" },
|
||||
{ title: "Work-Life Balance", icon: "⚖️", description: "Flexible work arrangements and generous leave policies" },
|
||||
{ title: "Health & Wellness", icon: "🏥", description: "Comprehensive health insurance and wellness programs" },
|
||||
{ title: "Innovative Culture", icon: "💡", description: "Work with cutting-edge technologies and industry experts" },
|
||||
// { title: "Global Impact", icon: "🌍", description: "Opportunity to work on projects with international reach" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white text-gray-900 min-h-screen">
|
||||
{/* Hero Banner */}
|
||||
<div
|
||||
className="relative w-full h-[60vh] bg-center bg-cover flex items-center justify-center"
|
||||
style={{ backgroundImage: `url(${careersBanner})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-blue-700/80 z-0" />
|
||||
<div className="relative z-10 text-center px-4 text-white max-w-4xl">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4 drop-shadow-lg">
|
||||
Build Your Future With Us
|
||||
</h1>
|
||||
<p className="text-lg md:text-2xl font-medium drop-shadow mb-8">
|
||||
Shape India's infrastructure landscape while advancing your professional journey.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => document.getElementById('openings').scrollIntoView({ behavior: 'smooth' })}
|
||||
className="bg-white text-blue-900 px-8 py-3 rounded-md font-bold hover:bg-gray-100 transition shadow-lg"
|
||||
>
|
||||
Explore Opportunities
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Why Join Us Section */}
|
||||
<div className="bg-gray-50 py-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-2 text-center">
|
||||
Why Build Your Career With Us?
|
||||
</h2>
|
||||
<p className="text-gray-600 text-center max-w-3xl mx-auto mb-12">
|
||||
We're committed to fostering an environment where professionals can thrive, innovate,
|
||||
and make meaningful contributions to India's infrastructure development.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition">
|
||||
<div className="text-4xl mb-4">{benefit.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-blue-800 mb-2">{benefit.title}</h3>
|
||||
<p className="text-gray-600">{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Our Culture Section */}
|
||||
<div className="py-16 bg-white">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="flex flex-col lg:flex-row gap-12 items-center">
|
||||
<div className="lg:w-1/2">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-6">Our Professional Culture</h2>
|
||||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||||
At our company, we cultivate a culture of excellence, collaboration, and continuous
|
||||
improvement. We believe that our people are our greatest asset, and we invest in their
|
||||
professional development.
|
||||
</p>
|
||||
<p className="text-gray-700 mb-6 leading-relaxed">
|
||||
Our teams work on challenging projects that push the boundaries of infrastructure
|
||||
development, while maintaining the highest standards of professional ethics and quality.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Innovation</span>
|
||||
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Integrity</span>
|
||||
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Excellence</span>
|
||||
<span className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Collaboration</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-1/2 bg-gray-100 rounded-xl overflow-hidden">
|
||||
<img
|
||||
src={careerImg}
|
||||
alt="Company Culture"
|
||||
className="w-full h-80 object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Openings Section */}
|
||||
<div id="openings" className="max-w-6xl mx-auto px-4 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-2">
|
||||
Current Professional Opportunities
|
||||
</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||
Explore our current openings and find the perfect position to advance your professional career.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Loading state */}
|
||||
{jobsLoading && (
|
||||
<div className="text-center py-12">
|
||||
<div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"></div>
|
||||
<p className="text-gray-600">Loading job openings...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error state */}
|
||||
{jobsError && (
|
||||
<div className="text-center py-12 bg-red-50 rounded-lg">
|
||||
<p className="text-red-600 mb-4">{jobsError}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Jobs listing */}
|
||||
{!jobsLoading && !jobsError && (
|
||||
<>
|
||||
{/* Enhanced Search Filters */}
|
||||
<div className="mb-8 grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter by position..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
value={searchFilters.position}
|
||||
onChange={(e) => setSearchFilters({...searchFilters, position: e.target.value})}
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter by skills..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
value={searchFilters.skills}
|
||||
onChange={(e) => setSearchFilters({...searchFilters, skills: e.target.value})}
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filter by location..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
|
||||
value={searchFilters.location}
|
||||
onChange={(e) => setSearchFilters({...searchFilters, location: e.target.value})}
|
||||
/>
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-3 flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="activeOnly"
|
||||
checked={activeOnly}
|
||||
onChange={() => setActiveOnly(!activeOnly)}
|
||||
className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label htmlFor="activeOnly" className="ml-2 text-sm text-gray-700">
|
||||
Show active positions only
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{(searchFilters.position || searchFilters.skills || searchFilters.location) && (
|
||||
<button
|
||||
onClick={() => setSearchFilters({ position: '', skills: '', location: '' })}
|
||||
className="text-blue-600 hover:text-blue-800 font-medium text-sm"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredJobs.length > 0 ? (
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{filteredJobs.map((job, index) => {
|
||||
const closingDate = job.closingDate ? new Date(job.closingDate) : null;
|
||||
const isExpired = closingDate ? new Date() > closingDate : false;
|
||||
const actualStatus = isExpired ? false : job.isActive;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={job.id}
|
||||
className={`bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition p-6 relative overflow-hidden ${!actualStatus ? 'opacity-80' : ''}`}
|
||||
>
|
||||
<div className={`absolute top-0 left-0 w-1 h-full ${actualStatus ? 'bg-blue-700' : 'bg-gray-400'}`}></div>
|
||||
|
||||
<div className="absolute -left-6 top-6 text-5xl text-blue-100 font-extrabold opacity-30 select-none">
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between md:items-center mb-4 pl-4">
|
||||
<div>
|
||||
<h3 className="text-blue-900 font-bold text-xl md:text-2xl">
|
||||
{job.positionName}
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
<span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium">
|
||||
{job.location}
|
||||
</span>
|
||||
<span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium">
|
||||
{job.experience}
|
||||
</span>
|
||||
<span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-medium">
|
||||
{getDaysAgo(job.postingDate)}
|
||||
</span>
|
||||
{!actualStatus && (
|
||||
<span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium">
|
||||
Position Closed
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4 md:mt-0">
|
||||
<button
|
||||
onClick={() => handleToggle(index)}
|
||||
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium shadow transition flex items-center gap-2 text-sm"
|
||||
>
|
||||
{selectedIndex === index ? (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
Hide
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
Details
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{actualStatus && (
|
||||
<button
|
||||
onClick={() => navigate('/job-application', { state: { jobId: job.id } })}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium shadow transition flex items-center gap-2 text-sm"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
Apply
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedIndex === index && (
|
||||
<div className="bg-gray-50 p-5 rounded-md border border-blue-100 mt-4 ml-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-800 mb-3">Position Overview</h4>
|
||||
<div className="space-y-4 text-sm text-gray-700">
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Qualification</p>
|
||||
<p>{job.qualification || 'Not specified'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Experience</p>
|
||||
<p>{job.experience || 'Not specified'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Location</p>
|
||||
<p>{job.location || 'Not specified'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Posted</p>
|
||||
<p>{getDaysAgo(job.postingDate)}</p>
|
||||
</div>
|
||||
{job.closingDate && (
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Closing Date</p>
|
||||
<p>{new Date(job.closingDate).toLocaleDateString()}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-blue-800 mb-3">Position Details</h4>
|
||||
<div className="space-y-4 text-sm text-gray-700">
|
||||
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Openings</p>
|
||||
<p>{job.numberOfOpenings || '1'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-500">Key Skills</p>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{Array.isArray(job.skills) && job.skills.length > 0 ? (
|
||||
job.skills.map((skill, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
|
||||
>
|
||||
{skill}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-sm text-gray-500">Not specified</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2">
|
||||
<h4 className="font-semibold text-blue-800 mb-3">Job Description</h4>
|
||||
<div className="prose prose-sm max-w-none text-gray-700">
|
||||
<p>{job.jobDescription || 'No description provided.'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{actualStatus && (
|
||||
<div className="flex justify-end mt-6">
|
||||
<button
|
||||
onClick={() => navigate('/job-application', { state: { jobId: job.id } })}
|
||||
className="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-md font-medium shadow-md transition flex items-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
Apply for this Position
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
!jobsLoading && (
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg">
|
||||
<p className="text-gray-600">
|
||||
{jobs.length === 0
|
||||
? "No positions are currently available. Please check back later."
|
||||
: "No positions match your current filters."}
|
||||
</p>
|
||||
{(searchFilters.position || searchFilters.skills || searchFilters.location) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchFilters({ position: '', skills: '', location: '' });
|
||||
setActiveOnly(true);
|
||||
}}
|
||||
className="mt-4 text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Call to Action - Contact HR Section (Kept exactly as before) */}
|
||||
<div className="bg-blue-900 text-white py-16">
|
||||
<div className="max-w-4xl mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Build Your Professional Future?</h2>
|
||||
<p className="text-blue-100 mb-8 text-lg">
|
||||
Even if you don't see the perfect role today, we're always interested in connecting with talented professionals.
|
||||
</p>
|
||||
{/* <div className="flex flex-col sm:flex-row justify-center gap-4">
|
||||
<button
|
||||
onClick={handleContactClick}
|
||||
className="bg-white text-blue-900 px-8 py-3 rounded-md font-bold hover:bg-gray-100 transition shadow-lg"
|
||||
>
|
||||
Stay connected with us
|
||||
</button>
|
||||
</div> */}
|
||||
|
||||
|
||||
<div className="mt-8 bg-white rounded-lg shadow-xl p-6 max-w-2xl mx-auto text-left text-gray-800">
|
||||
<h3 className="text-2xl font-bold text-blue-900 mb-4">HR Contact Form</h3>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="fullName" className="block text-gray-700 font-medium mb-2">
|
||||
Full Name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="fullName"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="email" className="block text-gray-700 font-medium mb-2">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="phone" className="block text-gray-700 font-medium mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label htmlFor="resume" className="block text-gray-700 font-medium mb-2">
|
||||
Upload Resume (PDF) <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="resume"
|
||||
name="resume"
|
||||
onChange={handleFileChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
accept=".pdf,.doc,.docx"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
{/* <button
|
||||
type="button"
|
||||
onClick={handleContactClick}
|
||||
className="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-100 transition"
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button> */}
|
||||
<button
|
||||
type="submit"
|
||||
className={`px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center gap-2 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8v8H4z"
|
||||
></path>
|
||||
</svg>
|
||||
)}
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Careers;
|
||||
245
src/pages/ContactUs.jsx
Normal file
245
src/pages/ContactUs.jsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import React, { useState } from "react";
|
||||
import "../styles/ContactUs.css";
|
||||
import contactHeroImg from "../assets/contact-hero.jpg";
|
||||
import centerImg from "../assets/contact-center.jpg";
|
||||
|
||||
const ContactUs = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
contact: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const [formErrors, setFormErrors] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
contact: "",
|
||||
message: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [notice, setNotice] = useState(null);
|
||||
|
||||
const API_BASE = (process.env.REACT_APP_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
|
||||
// Clear error when user starts typing
|
||||
if (formErrors[name]) {
|
||||
setFormErrors((prev) => ({ ...prev, [name]: "" }));
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const errors = {};
|
||||
let isValid = true;
|
||||
|
||||
// Name validation
|
||||
if (!formData.name.trim()) {
|
||||
errors.name = "Name is required";
|
||||
isValid = false;
|
||||
} else if (formData.name.trim().length < 2) {
|
||||
errors.name = "Name must be at least 2 characters";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
if (!formData.email.trim()) {
|
||||
errors.email = "Email is required";
|
||||
isValid = false;
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
errors.email = "Please enter a valid email address";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Contact validation
|
||||
const digits = (formData.contact || "").replace(/\D/g, "");
|
||||
if (!formData.contact.trim()) {
|
||||
errors.contact = "Contact number is required";
|
||||
isValid = false;
|
||||
} else if (digits.length < 7) {
|
||||
errors.contact = "Please enter a valid contact number (at least 7 digits)";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Message validation
|
||||
if (!formData.message.trim()) {
|
||||
errors.message = "Message is required";
|
||||
isValid = false;
|
||||
} else if (formData.message.trim().length < 10) {
|
||||
errors.message = "Message must be at least 10 characters";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
setFormErrors(errors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setNotice(null);
|
||||
|
||||
if (!validateForm()) {
|
||||
setNotice({ type: "error", text: "Please correct the errors in the form." });
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), 20000);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/contact`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(formData),
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
const data = await res.json().catch(() => ({}));
|
||||
|
||||
if (res.ok) {
|
||||
setNotice({ type: "success", text: data.message || "Message sent successfully! We'll get back to you soon." });
|
||||
setFormData({ name: "", email: "", contact: "", message: "" });
|
||||
} else {
|
||||
setNotice({
|
||||
type: "error",
|
||||
text: data?.error || `Something went wrong (HTTP ${res.status}). Please try again.`,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === "AbortError") {
|
||||
setNotice({ type: "error", text: "Request timed out. Please try again." });
|
||||
} else {
|
||||
setNotice({ type: "error", text: "Network error. Please check your connection and try again." });
|
||||
}
|
||||
} finally {
|
||||
clearTimeout(timeoutId);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="contact-page">
|
||||
<div
|
||||
className="contact-hero"
|
||||
style={{ backgroundImage: `url(${contactHeroImg})` }}
|
||||
role="img"
|
||||
aria-label="Contact page hero"
|
||||
>
|
||||
<div className="contact-overlay">
|
||||
<h1>CONTACT US</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-heading">
|
||||
<h2>LET'S RISE TOGETHER</h2>
|
||||
<p className="subheading">We have the highest of ambitions and are here to support you rise higher!</p>
|
||||
<p className="description">
|
||||
Whether you are a client looking for a solution or an associate looking for a partner, feel free to connect
|
||||
with us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="contact-content">
|
||||
<div className="contact-info">
|
||||
<h3>MEET US</h3>
|
||||
<hr />
|
||||
<div className="office-block">
|
||||
<h4>KOLHAPUR OFFICE</h4>
|
||||
<p>
|
||||
Laxmi Civil Engineering Services Pvt. Ltd.<br />
|
||||
1148, E. Sykes Extension, Kolhapur 416 001, Maharashtra, India.
|
||||
</p>
|
||||
<p>Phone No: 0231-2683900</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="contact-center-image">
|
||||
<img src={centerImg} alt="Office" />
|
||||
</div>
|
||||
|
||||
<div className="contact-form">
|
||||
<h3>SHARE YOUR THOUGHTS AND WE'LL CONTACT YOU!</h3>
|
||||
|
||||
{notice && (
|
||||
<div className={`notice ${notice.type === "success" ? "notice-success" : "notice-error"}`} role="alert">
|
||||
{notice.text}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name*"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
autoComplete="name"
|
||||
disabled={loading}
|
||||
className={formErrors.name ? "error" : ""}
|
||||
/>
|
||||
{formErrors.name && <span className="error-text">{formErrors.name}</span>}
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email*"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
autoComplete="email"
|
||||
disabled={loading}
|
||||
className={formErrors.email ? "error" : ""}
|
||||
/>
|
||||
{formErrors.email && <span className="error-text">{formErrors.email}</span>}
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
name="contact"
|
||||
placeholder="Contact*"
|
||||
value={formData.contact}
|
||||
onChange={handleChange}
|
||||
required
|
||||
autoComplete="tel"
|
||||
inputMode="tel"
|
||||
disabled={loading}
|
||||
className={formErrors.contact ? "error" : ""}
|
||||
/>
|
||||
{formErrors.contact && <span className="error-text">{formErrors.contact}</span>}
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<textarea
|
||||
name="message"
|
||||
placeholder="Message*"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={5}
|
||||
disabled={loading}
|
||||
className={formErrors.message ? "error" : ""}
|
||||
/>
|
||||
{formErrors.message && <span className="error-text">{formErrors.message}</span>}
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={loading}>
|
||||
{loading ? "SENDING..." : "SUBMIT"}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactUs;
|
||||
240
src/pages/Gallery.jsx
Normal file
240
src/pages/Gallery.jsx
Normal file
@@ -0,0 +1,240 @@
|
||||
// src/pages/Gallery.jsx
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import heroBg from "../assets/awards-hero.jpg";
|
||||
import { FiChevronLeft, FiChevronRight, FiX } from "react-icons/fi";
|
||||
import "../styles/Gallery.css";
|
||||
|
||||
const Gallery = () => {
|
||||
const [activeCategory, setActiveCategory] = useState("Awards & Achievements");
|
||||
const [galleryItems, setGalleryItems] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedItem, setSelectedItem] = useState(null);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const categoryRef = useRef(null);
|
||||
|
||||
const categories = [
|
||||
{ label: "Awards & Achievements", value: "Awards & Achievements" },
|
||||
{ label: "Client Testimonials", value: "Client Testimonials" },
|
||||
];
|
||||
|
||||
// Disable right-click
|
||||
useEffect(() => {
|
||||
const handleContextMenu = (e) => e.preventDefault();
|
||||
document.addEventListener("contextmenu", handleContextMenu);
|
||||
return () => document.removeEventListener("contextmenu", handleContextMenu);
|
||||
}, []);
|
||||
|
||||
// Fetch gallery items
|
||||
useEffect(() => {
|
||||
const fetchGalleryItems = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/gallery`);
|
||||
setGalleryItems(Array.isArray(response.data) ? response.data : []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching gallery items:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchGalleryItems();
|
||||
}, []);
|
||||
|
||||
// Scroll to categories if hash exists
|
||||
useEffect(() => {
|
||||
if (window.location.hash === "#categories" && categoryRef.current) {
|
||||
setTimeout(() => {
|
||||
categoryRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}, 200);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const filteredItems = galleryItems.filter(
|
||||
(item) => item.category === activeCategory
|
||||
);
|
||||
|
||||
const openLightbox = (item, index) => {
|
||||
setSelectedItem(item);
|
||||
setCurrentIndex(index);
|
||||
};
|
||||
|
||||
const navigateLightbox = (direction) => {
|
||||
const items = filteredItems;
|
||||
let newIndex;
|
||||
if (direction === "prev") {
|
||||
newIndex = (currentIndex - 1 + items.length) % items.length;
|
||||
} else {
|
||||
newIndex = (currentIndex + 1) % items.length;
|
||||
}
|
||||
setSelectedItem(items[newIndex]);
|
||||
setCurrentIndex(newIndex);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div
|
||||
className="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
|
||||
style={{ backgroundImage: `url(${heroBg})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
|
||||
<div className="relative z-10 text-center px-4 animate-fadeIn">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white drop-shadow-lg">
|
||||
Our Awards
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl md:text-2xl text-white mt-2 italic drop-shadow-md">
|
||||
Celebrating Excellence & Achievements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Buttons */}
|
||||
<div
|
||||
ref={categoryRef}
|
||||
className="flex flex-wrap justify-center gap-4 px-4 mt-8 mb-10"
|
||||
>
|
||||
{categories.map((category) => {
|
||||
const isSelected = activeCategory === category.value;
|
||||
return (
|
||||
<button
|
||||
key={category.value}
|
||||
onClick={() => setActiveCategory(category.value)}
|
||||
className={`text-base lg:text-lg text-white font-semibold px-6 py-3 rounded-2xl shadow-lg transition-all duration-300 transform hover:scale-105
|
||||
${isSelected ? "bg-gradient-to-r from-blue-600 to-blue-800 ring-4 ring-offset-2 ring-white" : "bg-gradient-to-r from-gray-600 to-gray-800"}`}
|
||||
>
|
||||
{category.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Gallery Grid */}
|
||||
<div className="px-6">
|
||||
{loading ? (
|
||||
<p className="text-gray-500 text-xl text-center">Loading gallery items...</p>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<p className="text-gray-600 text-xl text-center">No items available in this category.</p>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-3 sm:grid-cols-2 gap-6">
|
||||
{filteredItems.map((item, index) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="rounded-xl shadow-lg overflow-hidden border bg-white hover:shadow-2xl transition-all duration-300"
|
||||
>
|
||||
{item.type === "image" ? (
|
||||
<img
|
||||
src={`${process.env.REACT_APP_API_BASE_URL}${item.url}`}
|
||||
alt={item.caption || "Gallery Image"}
|
||||
className="h-64 w-full object-cover cursor-pointer hover:scale-105 transition-transform duration-300"
|
||||
onClick={() => openLightbox(item, index)}
|
||||
draggable="false"
|
||||
onDragStart={(e) => e.preventDefault()}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
className="h-64 w-full object-cover cursor-pointer"
|
||||
onClick={() => openLightbox(item, index)}
|
||||
controls={false}
|
||||
>
|
||||
<source src={`${process.env.REACT_APP_API_BASE_URL}${item.url}`} type="video/mp4" />
|
||||
</video>
|
||||
)}
|
||||
<div className="p-5 text-left">
|
||||
<p className="text-sm text-gray-700 leading-relaxed">
|
||||
{item.caption || "No caption available"}
|
||||
</p>
|
||||
{item.date && (
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
{new Date(item.date).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Lightbox Overlay */}
|
||||
{selectedItem && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4"
|
||||
onClick={() => setSelectedItem(null)}
|
||||
>
|
||||
{/* Close */}
|
||||
<button
|
||||
className="absolute top-4 right-4 text-white text-3xl"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
>
|
||||
<FiX />
|
||||
</button>
|
||||
|
||||
{/* Previous */}
|
||||
<button
|
||||
className="absolute left-4 text-white text-3xl p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateLightbox("prev");
|
||||
}}
|
||||
>
|
||||
<FiChevronLeft size={32} />
|
||||
</button>
|
||||
|
||||
{/* Content */}
|
||||
<div className="max-w-4xl w-full" onClick={(e) => e.stopPropagation()}>
|
||||
{selectedItem.type === "image" ? (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={`${process.env.REACT_APP_API_BASE_URL}${selectedItem.url}`}
|
||||
alt={selectedItem.caption || "Gallery Image"}
|
||||
className="max-w-full max-h-[80vh] mx-auto rounded-lg shadow-lg"
|
||||
draggable="false"
|
||||
onDragStart={(e) => e.preventDefault()}
|
||||
/>
|
||||
{/* Watermark */}
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="text-2xl font-bold text-white opacity-30" style={{
|
||||
transform: 'rotate(-45deg)',
|
||||
textShadow: '2px 2px 4px rgba(0,0,0,0.5)'
|
||||
}}>
|
||||
SAMPLE WATERMARK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<video
|
||||
controls
|
||||
autoPlay
|
||||
className="max-w-full max-h-[80vh] mx-auto rounded-lg shadow-lg"
|
||||
>
|
||||
<source src={`${process.env.REACT_APP_API_BASE_URL}${selectedItem.url}`} type="video/mp4" />
|
||||
</video>
|
||||
)}
|
||||
<div className="text-center mt-4 text-white">
|
||||
<p className="text-lg">{selectedItem.caption}</p>
|
||||
{selectedItem.date && (
|
||||
<p className="text-sm text-gray-300">{new Date(selectedItem.date).toLocaleDateString()}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next */}
|
||||
<button
|
||||
className="absolute right-4 text-white text-3xl p-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateLightbox("next");
|
||||
}}
|
||||
>
|
||||
<FiChevronRight size={32} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Gallery;
|
||||
320
src/pages/GalleryAdmin.jsx
Normal file
320
src/pages/GalleryAdmin.jsx
Normal file
@@ -0,0 +1,320 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
import { toast } from "react-toastify";
|
||||
import { FiX, FiEdit2, FiTrash2 } from "react-icons/fi";
|
||||
|
||||
const GalleryAdmin = () => {
|
||||
const [galleryItems, setGalleryItems] = useState([]);
|
||||
const [category, setCategory] = useState("Awards & Achievements");
|
||||
const [caption, setCaption] = useState("");
|
||||
const [date, setDate] = useState("");
|
||||
const [media, setMedia] = useState(null);
|
||||
const [mediaPreview, setMediaPreview] = useState(null);
|
||||
const [mediaType, setMediaType] = useState("image");
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [editItemId, setEditItemId] = useState(null);
|
||||
|
||||
const categories = [
|
||||
{ label: "Awards & Achievements", value: "Awards & Achievements" },
|
||||
{ label: "Client Testimonials", value: "Client Testimonials" },
|
||||
];
|
||||
|
||||
// Fetch all gallery items
|
||||
const fetchGalleryItems = async () => {
|
||||
try {
|
||||
const res = await axios.get(`${process.env.REACT_APP_API_BASE_URL}/api/gallery`);
|
||||
setGalleryItems(res.data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching gallery items", err);
|
||||
toast.error("Failed to load gallery items");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchGalleryItems();
|
||||
}, []);
|
||||
|
||||
// Reset the form
|
||||
const resetForm = () => {
|
||||
setCategory("Awards & Achievements");
|
||||
setCaption("");
|
||||
setDate("");
|
||||
setMedia(null);
|
||||
setMediaPreview(null);
|
||||
setMediaType("image");
|
||||
setEditMode(false);
|
||||
setEditItemId(null);
|
||||
};
|
||||
|
||||
// Handle media selection
|
||||
const handleMediaChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
setMedia(file);
|
||||
|
||||
// Check if file is video
|
||||
if (file.type.includes("video")) {
|
||||
setMediaType("video");
|
||||
setMediaPreview(URL.createObjectURL(file));
|
||||
} else {
|
||||
setMediaType("image");
|
||||
setMediaPreview(URL.createObjectURL(file));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle form submit (add or update)
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!category || (!editMode && !media)) {
|
||||
toast.error("Category and media file are required!");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("category", category);
|
||||
formData.append("caption", caption);
|
||||
formData.append("date", date);
|
||||
formData.append("type", mediaType);
|
||||
if (media) formData.append("media", media);
|
||||
|
||||
try {
|
||||
if (editMode) {
|
||||
await axios.put(
|
||||
`${process.env.REACT_APP_API_BASE_URL}/api/gallery/${editItemId}`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
toast.success("Gallery item updated successfully!");
|
||||
} else {
|
||||
await axios.post(
|
||||
`${process.env.REACT_APP_API_BASE_URL}/api/gallery`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
}
|
||||
);
|
||||
toast.success("Gallery item added successfully!");
|
||||
}
|
||||
|
||||
resetForm();
|
||||
fetchGalleryItems();
|
||||
} catch (err) {
|
||||
console.error("Failed to save gallery item", err);
|
||||
toast.error("Error saving gallery item");
|
||||
}
|
||||
};
|
||||
|
||||
// Load item into form for editing
|
||||
const handleEdit = (item) => {
|
||||
setCategory(item.category);
|
||||
setCaption(item.caption);
|
||||
setDate(item.date || "");
|
||||
setMedia(null);
|
||||
setMediaType(item.type);
|
||||
setMediaPreview(`${process.env.REACT_APP_API_BASE_URL}${item.url}`);
|
||||
setEditMode(true);
|
||||
setEditItemId(item.id);
|
||||
};
|
||||
|
||||
// Delete an item
|
||||
const handleDelete = async (id) => {
|
||||
if (!window.confirm("Are you sure you want to delete this item?")) return;
|
||||
|
||||
try {
|
||||
await axios.delete(`${process.env.REACT_APP_API_BASE_URL}/api/gallery/${id}`);
|
||||
toast.success("Item deleted");
|
||||
fetchGalleryItems();
|
||||
} catch (err) {
|
||||
console.error("Failed to delete", err);
|
||||
toast.error("Failed to delete item");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-6 min-h-screen bg-gray-50">
|
||||
<h1 className="text-3xl font-bold text-blue-900 mb-6">
|
||||
{editMode ? "Edit Gallery Item" : "Add New Gallery Item"}
|
||||
</h1>
|
||||
|
||||
{/* FORM */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4 max-w-md mx-auto bg-white p-6 rounded-lg shadow">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
|
||||
<select
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
required
|
||||
>
|
||||
{categories.map((cat) => (
|
||||
<option key={cat.value} value={cat.value}>
|
||||
{cat.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Media Type</label>
|
||||
<select
|
||||
value={mediaType}
|
||||
onChange={(e) => setMediaType(e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
disabled={editMode && !media} // Disable if editing and no new media selected
|
||||
>
|
||||
<option value="image">Image</option>
|
||||
<option value="video">Video</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
{mediaType === "image" ? "Image" : "Video"} Upload
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
accept={mediaType === "image" ? "image/*" : "video/*"}
|
||||
onChange={handleMediaChange}
|
||||
className="w-full"
|
||||
required={!editMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mediaPreview && (
|
||||
<div className="relative">
|
||||
{mediaType === "image" ? (
|
||||
<img
|
||||
src={mediaPreview}
|
||||
alt="Preview"
|
||||
className="h-48 w-full object-contain rounded border"
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
controls
|
||||
className="h-48 w-full object-contain rounded border"
|
||||
>
|
||||
<source src={mediaPreview} type="video/mp4" />
|
||||
</video>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMedia(null);
|
||||
setMediaPreview(null);
|
||||
}}
|
||||
className="absolute top-2 right-2 bg-black bg-opacity-50 text-white p-1 rounded-full"
|
||||
>
|
||||
<FiX size={18} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Caption</label>
|
||||
<input
|
||||
type="text"
|
||||
value={caption}
|
||||
onChange={(e) => setCaption(e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
placeholder="Enter caption"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Date (optional)</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="w-full border p-2 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 bg-blue-900 text-white py-2 rounded hover:bg-blue-800"
|
||||
>
|
||||
{editMode ? "Update Item" : "Save Item"}
|
||||
</button>
|
||||
{editMode && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={resetForm}
|
||||
className="flex-1 bg-gray-300 text-black py-2 rounded hover:bg-gray-400"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* GALLERY ITEMS LIST */}
|
||||
<div className="mt-10">
|
||||
<h2 className="text-2xl font-semibold text-blue-800 mb-4">All Gallery Items</h2>
|
||||
<div className="grid md:grid-cols-3 sm:grid-cols-2 gap-6">
|
||||
{galleryItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-white p-4 rounded-xl shadow hover:shadow-lg transition-all relative"
|
||||
>
|
||||
{item.type === "image" ? (
|
||||
<img
|
||||
src={`${process.env.REACT_APP_API_BASE_URL}${item.url}`}
|
||||
alt={item.caption || "Gallery item"}
|
||||
className="h-56 w-full object-cover rounded mb-3"
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
className="h-56 w-full object-cover rounded mb-3"
|
||||
controls
|
||||
>
|
||||
<source src={`${process.env.REACT_APP_API_BASE_URL}${item.url}`} type="video/mp4" />
|
||||
</video>
|
||||
)}
|
||||
|
||||
<p className="text-sm font-medium text-gray-700 mb-1">
|
||||
<span className="font-semibold">Category:</span> {item.category}
|
||||
</p>
|
||||
{item.caption && (
|
||||
<p className="text-sm text-gray-600 mb-1 line-clamp-2">
|
||||
<span className="font-semibold">Caption:</span> {item.caption}
|
||||
</p>
|
||||
)}
|
||||
{item.date && (
|
||||
<p className="text-xs text-gray-500">
|
||||
{new Date(item.date).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between mt-3">
|
||||
<button
|
||||
onClick={() => handleEdit(item)}
|
||||
className="flex items-center text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
<FiEdit2 className="mr-1" /> Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="flex items-center text-red-600 hover:text-red-800"
|
||||
>
|
||||
<FiTrash2 className="mr-1" /> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GalleryAdmin;
|
||||
14
src/pages/HRAdmin.jsx
Normal file
14
src/pages/HRAdmin.jsx
Normal file
@@ -0,0 +1,14 @@
|
||||
// src/pages/HRAdmin.jsx
|
||||
import React from "react";
|
||||
import Apply from "./Apply"; // reuse your Apply form component
|
||||
|
||||
const HRAdmin = () => {
|
||||
return (
|
||||
<div className="min-h-screen p-6 bg-gray-50">
|
||||
<h1 className="text-3xl font-bold mb-6 text-blue-900">HR Applications</h1>
|
||||
<Apply />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HRAdmin;
|
||||
300
src/pages/Home.jsx
Normal file
300
src/pages/Home.jsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import videoSrc from '../assets/video.mp4';
|
||||
import SectorsSlider from '../components/SectorsSlider';
|
||||
import CounterCard from '../components/CounterCard';
|
||||
import '../styles/Home.css';
|
||||
import IndiaMap from "../components/IndiaMap";
|
||||
import ClientsSection from '../components/ClientsSection';
|
||||
import '../styles/CounterCard.css';
|
||||
|
||||
// Animation variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.3,
|
||||
when: "beforeChildren"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { y: 20, opacity: 0 },
|
||||
visible: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.5,
|
||||
ease: "easeOut"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fadeIn = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { duration: 0.8 }
|
||||
}
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className="w-full bg-gradient-to-b from-blue-50 via-gray-50 to-white">
|
||||
{/* Hero Video Section */}
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={fadeIn}
|
||||
className="relative w-full h-[60vh] overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/40 to-blue-600/30 z-10"></div>
|
||||
<video
|
||||
className="absolute top-0 left-0 w-full h-full object-cover z-0"
|
||||
src={videoSrc}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
className="absolute top-0 left-0 w-full h-full z-20 flex items-center justify-center overflow-visible"
|
||||
>
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="text-center text-white px-4 max-w-4xl"
|
||||
>
|
||||
<h1 className="text-3xl md:text-5xl lg:text-5xl font-extrabold mb-6 drop-shadow-lg leading-snug md:leading-normal bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-100">
|
||||
Building the Future Restoring the Past
|
||||
</h1>
|
||||
|
||||
<p className="text-lg md:text-xl lg:text-2xl font-medium drop-shadow max-w-2xl mx-auto bg-blue-900/30 backdrop-blur-sm rounded-lg p-4">
|
||||
CONSTRUCTING WITH EXCELLENCE. DELIVERING PRIDE FOR GENERATIONS
|
||||
</p>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
</motion.div>
|
||||
|
||||
{/* Floating particles background */}
|
||||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-blue-200/30"
|
||||
initial={{
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
width: Math.random() * 10 + 5,
|
||||
height: Math.random() * 10 + 5,
|
||||
}}
|
||||
animate={{
|
||||
y: [0, Math.random() * 100 - 50],
|
||||
x: [0, Math.random() * 100 - 50],
|
||||
transition: {
|
||||
duration: Math.random() * 10 + 10,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Sector Slider */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative py-12 bg-gradient-to-br from-blue-50 to-blue-100"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiMxRTg0RkYiIGZpbGwtb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIgMS44LTQgNC00czQgMS44IDQgNC0xLjggNC00IDQtNC0xLjgtNC00eiIvPjwvZz48L2c+PC9zdmc+')]"></div>
|
||||
</div>
|
||||
<SectorsSlider />
|
||||
</motion.div>
|
||||
|
||||
{/* About Section */}
|
||||
<motion.section
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
variants={containerVariants}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
className="relative py-16 px-4 md:px-8 lg:px-20 bg-white rounded-t-3xl shadow-xl overflow-hidden"
|
||||
>
|
||||
{/* Decorative corner */}
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-600/5 clip-path-polygon-[0_0,_100%_0,_100%_100%]"></div>
|
||||
|
||||
|
||||
</motion.section>
|
||||
{/* Vision & Mission Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative py-20 px-4 md:px-8 lg:px-20 bg-gradient-to-br from-blue-900 to-blue-800 overflow-hidden"
|
||||
>
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute top-0 left-0 w-full h-full opacity-10">
|
||||
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMzYgMzRjMC0yLjIgMS44LTQgNC00czQgMS44IDQgNC0xLjggNC00IDQtNC0xLjgtNC00eiIvPjwvZz48L2c+PC9zdmc+')]"></div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="max-w-7xl mx-auto relative z-10"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-center text-white mb-16 relative pb-2">
|
||||
<span className="relative inline-block">
|
||||
Vision & Mission
|
||||
<motion.span
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute bottom-0 left-0 w-full h-1 bg-red-500 z-0 transform origin-center"
|
||||
/>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{/* Vision */}
|
||||
<motion.div
|
||||
initial={{ x: -50, opacity: 0 }}
|
||||
whileInView={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-blue-500 hover:border-blue-400"
|
||||
>
|
||||
<div className="flex items-start mb-6">
|
||||
<div className="bg-blue-100 p-3 rounded-full mr-4">
|
||||
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Vision</h3>
|
||||
<p className="text-gray-700">
|
||||
To be a company at the forefront of engineering and construction, renowned for excellence, quality, performance, and reliability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Mission */}
|
||||
<motion.div
|
||||
initial={{ x: 50, opacity: 0 }}
|
||||
whileInView={{ x: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all border-l-4 border-red-500 hover:border-red-400"
|
||||
>
|
||||
<div className="flex items-start mb-6">
|
||||
<div className="bg-blue-100 p-3 rounded-full mr-4">
|
||||
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-blue-900 mb-2">Mission</h3>
|
||||
<p className="text-gray-700">
|
||||
To complete every project undertaken with sincerity, excellence, and in a time-bound manner, meeting all expectations of the client.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
|
||||
{/* Clients Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative py-20 bg-gradient-to-br from-white to-blue-50 overflow-hidden"
|
||||
>
|
||||
{/* Decorative elements */}
|
||||
<div className="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-blue-200/20"></div>
|
||||
<div className="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-blue-300/10"></div>
|
||||
|
||||
<ClientsSection />
|
||||
</motion.div>
|
||||
|
||||
{/* Map Section */}
|
||||
<motion.section
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative py-20 px-4 md:px-8 lg:px-20 text-white"
|
||||
>
|
||||
{/* Animated background */}
|
||||
<div className="absolute inset-0 overflow-hidden opacity-10">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute rounded-full bg-white"
|
||||
initial={{
|
||||
x: Math.random() * 100,
|
||||
y: Math.random() * 100,
|
||||
width: Math.random() * 20 + 5,
|
||||
height: Math.random() * 20 + 5,
|
||||
opacity: Math.random() * 0.3,
|
||||
}}
|
||||
animate={{
|
||||
y: [0, Math.random() * 100 - 50],
|
||||
x: [0, Math.random() * 100 - 50],
|
||||
transition: {
|
||||
duration: Math.random() * 15 + 15,
|
||||
repeat: Infinity,
|
||||
repeatType: "reverse",
|
||||
ease: "easeInOut",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto text-center relative z-10">
|
||||
<h2 className="text-4xl font-bold mb-4 relative inline-block text-blue-900">
|
||||
<span className="relative z-10">
|
||||
Our Presence Across India
|
||||
<motion.span
|
||||
initial={{ scaleX: 0 }}
|
||||
whileInView={{ scaleX: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="absolute bottom-0 left-0 w-full h-1 bg-red-500 z-0 transform origin-center"
|
||||
/>
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
We have successfully delivered projects in multiple states across India, with a growing national footprint.
|
||||
</p>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95 }}
|
||||
whileInView={{ scale: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white/10 backdrop-blur-sm p-6 rounded-xl shadow-lg border border-blue-400/30"
|
||||
>
|
||||
<IndiaMap />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
326
src/pages/JobApplicationForm.jsx
Normal file
326
src/pages/JobApplicationForm.jsx
Normal file
@@ -0,0 +1,326 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const JobApplicationForm = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
education: '',
|
||||
skill: '',
|
||||
interest: '',
|
||||
totalExperience: '',
|
||||
expectedSalary: '',
|
||||
currentCompany: '',
|
||||
currentDesignation: '',
|
||||
preferredLocation: '', // new field
|
||||
infrastructureExpertise: '', // new field
|
||||
resume: null,
|
||||
});
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, files } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: type === 'file' ? files[0] : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setSubmitSuccess(false);
|
||||
|
||||
const form = new FormData();
|
||||
for (let key in formData) {
|
||||
form.append(key, formData[key]);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${process.env.REACT_APP_API_BASE_URL}/send-application`, {
|
||||
method: 'POST',
|
||||
body: form,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitSuccess(true); // show popup
|
||||
setFormData({
|
||||
fullName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
education: '',
|
||||
skill: '',
|
||||
interest: '',
|
||||
totalExperience: '',
|
||||
expectedSalary: '',
|
||||
currentCompany: '',
|
||||
currentDesignation: '',
|
||||
preferredLocation: '',
|
||||
infrastructureExpertise: '',
|
||||
resume: null,
|
||||
});
|
||||
} else {
|
||||
alert(result.message || 'Error submitting application');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Submission error:', err);
|
||||
alert('Error submitting application. Please try again.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-close success popup after 2 seconds
|
||||
useEffect(() => {
|
||||
if (submitSuccess) {
|
||||
const timer = setTimeout(() => setSubmitSuccess(false), 2000);
|
||||
return () => clearTimeout(timer); // cleanup
|
||||
}
|
||||
}, [submitSuccess]);
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-12">
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
<div className="bg-blue-800 text-white p-6">
|
||||
<h2 className="text-2xl font-bold">Job Application Form</h2>
|
||||
<p className="text-blue-100">Please fill out the form below to apply for the position</p>
|
||||
</div>
|
||||
|
||||
{/* Success Popup */}
|
||||
{submitSuccess && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-30">
|
||||
<div
|
||||
className="bg-green-100 border-l-4 border-green-500 text-green-700 p-6 rounded shadow-lg max-w-md w-full animate-slide-in"
|
||||
style={{ animation: 'slideIn 0.5s ease-out' }}
|
||||
>
|
||||
<p className="font-semibold text-lg">Application Submitted Successfully!</p>
|
||||
<p className="mt-2">
|
||||
Thank you for your application. We will review your information and contact you soon.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6" encType="multipart/form-data">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Personal Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 border-b pb-2">Personal Information</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Phone *</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Area of Expertise (Infrastructure)</label>
|
||||
<input
|
||||
type="text"
|
||||
name="infrastructureExpertise"
|
||||
value={formData.infrastructureExpertise}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Your expertise in infrastructure field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Professional Information */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 border-b pb-2">Professional Information</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Current Company</label>
|
||||
<input
|
||||
type="text"
|
||||
name="currentCompany"
|
||||
value={formData.currentCompany}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Current Designation</label>
|
||||
<input
|
||||
type="text"
|
||||
name="currentDesignation"
|
||||
value={formData.currentDesignation}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Total Experience (Years) *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="totalExperience"
|
||||
value={formData.totalExperience}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Expected Salary</label>
|
||||
<input
|
||||
type="text"
|
||||
name="expectedSalary"
|
||||
value={formData.expectedSalary}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Preferred Location</label>
|
||||
<input
|
||||
type="text"
|
||||
name="preferredLocation"
|
||||
value={formData.preferredLocation}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="City / Region you prefer to work in"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Education and Skills */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 border-b pb-2">Qualifications</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Education *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="education"
|
||||
value={formData.education}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Degrees, Certifications, etc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Skills *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="skill"
|
||||
value={formData.skill}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="List your key skills separated by commas"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Professional Interests</label>
|
||||
<input
|
||||
type="text"
|
||||
name="interest"
|
||||
value={formData.interest}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-gray-300 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Areas of professional interest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Resume Upload */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 border-b pb-2">Resume</h3>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Upload Resume *</label>
|
||||
<div className="mt-1 flex items-center">
|
||||
<label className="cursor-pointer bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
Choose File
|
||||
<input
|
||||
type="file"
|
||||
name="resume"
|
||||
onChange={handleChange}
|
||||
accept=".pdf,.doc,.docx"
|
||||
required
|
||||
className="sr-only"
|
||||
/>
|
||||
</label>
|
||||
<span className="ml-4 text-sm text-gray-500">
|
||||
{formData.resume ? formData.resume.name : "No file chosen"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-500">PDF, DOC, DOCX (Max. 5MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Submission */}
|
||||
<div className="pt-4 border-t">
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className={`px-6 py-3 rounded-md text-white font-medium ${isSubmitting ? 'bg-blue-400' : 'bg-blue-600 hover:bg-blue-700'} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors`}
|
||||
>
|
||||
{isSubmitting ? 'Submitting...' : 'Submit Application'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default JobApplicationForm;
|
||||
181
src/pages/Office.jsx
Normal file
181
src/pages/Office.jsx
Normal file
@@ -0,0 +1,181 @@
|
||||
const Office = () => {
|
||||
const offices = {
|
||||
"Registered Office": [
|
||||
{
|
||||
address: "1148/E, Sykes Extension, Kolhapur - 416001, Maharashtra, India.",
|
||||
},
|
||||
],
|
||||
"Corporate Office": [
|
||||
{
|
||||
address:
|
||||
"C.S.NO. 1031/K2, E Ward, 3rd Floor, Sterling Tower, Gavat Mandai Road, Kolhapur - 416001, Maharashtra, India.",
|
||||
phone: "+91 231 2686910/11, 2529199",
|
||||
fax: "+91 231 2668199",
|
||||
email: "career@lcepl.com",
|
||||
},
|
||||
],
|
||||
"Regional Offices": {
|
||||
Maharashtra: {
|
||||
Mumbai: "141 & 142, 14th Floor, Mittal Court, 224 Nariman Point, Mumbai - 400021, India",
|
||||
"Navi Mumbai":
|
||||
"Flat No. F-1, Pariwar Housing Society, Above Ramdev Hotel, Sector No. 4/5, Vashi, Navi Mumbai - 400703, India",
|
||||
Pune:
|
||||
'"A.J. Residency" 5th Floor, Flat No. 502, S. No. 4711, Plot No. 6, Tawre Colony, Near Chougule Showroom, Pune - 411 009, India',
|
||||
Nagpur:
|
||||
"10-A, Samata Layout, beside NIT office, Diagonal opposite to NIT swimming Pool, Ambazari, Nagpur - 440010",
|
||||
},
|
||||
Karnataka: {
|
||||
Bengaluru:
|
||||
"198, 33rd Cross, 3rd Main Road, 7th Block, Jayanagar, Bangalore - 560070",
|
||||
Belgavi:
|
||||
"Plot No. 51, Teachers Colony, Vinayaknagar, Hindalga Road, Belgavi - 591 108, India",
|
||||
},
|
||||
"Madhya Pradesh": {
|
||||
Bhopal: "E-3/165, Arera Colony, Bhopal - 462 016, Madhya Pradesh, India.",
|
||||
Indore:
|
||||
"Block No. 608, 6th Floor, Apollo Premier Towers, Vijay Nagar, Ring Road, Indore - 452010, India",
|
||||
},
|
||||
Goa: {
|
||||
Panaji:
|
||||
"Office No. 406, Kamat Grand, Behind Caculo Mall, Saint Intez, Panaji City 403001 (Goa), India",
|
||||
},
|
||||
Chhattisgarh: {
|
||||
Raipur:
|
||||
"Flat No. 202, Kashi Apartment, Geetanjali Nagar, Raipur - 492006, Chhattisgarh, India.",
|
||||
},
|
||||
"Andhra Pradesh": {
|
||||
Vijayawada:
|
||||
"42 2 1 202 Drwa No. 423, 1st Floor, Janaki Nilayam, Main Road, Devi Nagar, Vijayawada, Krishna, Andhra Pradesh - 520 003, India",
|
||||
},
|
||||
"Uttar Pradesh": {
|
||||
Lucknow:
|
||||
"Parth Aadyant Tower, Ashlesha A House no. 203, Near Phoenix Palassio Mall, Gomtinagar Extension, Along Shahid Path, Lucknow - 226010, India",
|
||||
},
|
||||
Bihar: {
|
||||
Patna:
|
||||
"501, Manan Mansion Apartment, Gorkhnathpath Lane, East Boring, Canal Road, Patna - 800001, Bihar, India.",
|
||||
},
|
||||
Gujarat: {
|
||||
Ahmedabad:
|
||||
"3rd Floor, A 9, 10, Sardar Mall, Near Dimond Mill, Nocol, Ahmedabad - 382350, Gujarat, India.",
|
||||
},
|
||||
Uttarakhand: {
|
||||
Dehradun:
|
||||
"House No. 12-B, Ekta Enclave, Lane No. 6, Near Success Point Global Academy, Neharu Gram Road, Nathanpur, Deharadun - 248005, Uttarakhand, India.",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header with animation */}
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 relative inline-block">
|
||||
<span className="relative z-10">Our Offices</span>
|
||||
<span className="absolute bottom-0 left-0 w-full h-2 bg-blue-200 z-0 opacity-70 transform translate-y-1"></span>
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||
Connecting with you across multiple locations in India
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main content with glassmorphism effect */}
|
||||
<div className="space-y-16">
|
||||
{/* Registered Office */}
|
||||
<section className="relative">
|
||||
<div className="absolute -inset-4 bg-blue-100 rounded-xl opacity-25 blur"></div>
|
||||
<div className="relative bg-white rounded-xl shadow-lg p-6 md:p-8 backdrop-blur-sm border border-blue-100">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-2 bg-blue-100 rounded-lg mr-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-blue-800">REGISTERED OFFICE</h2>
|
||||
</div>
|
||||
<div className="pl-14">
|
||||
<p className="text-gray-700 text-lg">{offices["Registered Office"][0].address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Corporate Office */}
|
||||
<section className="relative">
|
||||
<div className="absolute -inset-4 bg-blue-100 rounded-xl opacity-25 blur"></div>
|
||||
<div className="relative bg-white rounded-xl shadow-lg p-6 md:p-8 backdrop-blur-sm border border-blue-100">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="p-2 bg-blue-100 rounded-lg mr-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-blue-800">CORPORATE OFFICE</h2>
|
||||
</div>
|
||||
<div className="pl-14 space-y-3">
|
||||
<p className="text-gray-700 text-lg">{offices["Corporate Office"][0].address}</p>
|
||||
<div className="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<p className="text-gray-700 text-lg">{offices["Corporate Office"][0].phone}</p>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
|
||||
</svg>
|
||||
<p className="text-gray-700 text-lg">{offices["Corporate Office"][0].fax}</p>
|
||||
</div>
|
||||
<div className="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-500 mt-1 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<p className="text-gray-700 text-lg">{offices["Corporate Office"][0].email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Regional Offices */}
|
||||
<section>
|
||||
<div className="text-center mb-10">
|
||||
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
||||
<span className="relative z-10">REGIONAL OFFICES</span>
|
||||
<span className="absolute bottom-0 left-0 w-full h-2 bg-blue-200 z-0 opacity-50 transform translate-y-1"></span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{Object.entries(offices["Regional Offices"]).map(([state, cities]) => (
|
||||
<div key={state} className="relative group">
|
||||
<div className="absolute -inset-1 bg-gradient-to-r from-blue-100 to-blue-50 rounded-lg opacity-75 group-hover:opacity-100 blur transition duration-200"></div>
|
||||
<div className="relative bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:border-blue-200 transition duration-200 h-full">
|
||||
<div className="bg-blue-600 px-6 py-3">
|
||||
<h3 className="text-xl font-bold text-white">{state}</h3>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
{Object.entries(cities).map(([city, address]) => (
|
||||
<div key={city} className="pb-4 border-b border-gray-100 last:border-0 last:pb-0">
|
||||
<h4 className="font-bold text-blue-800 flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
{city}
|
||||
</h4>
|
||||
<p className="text-gray-600 text-sm mt-1 pl-7">{address}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Office;
|
||||
284
src/pages/Projects.jsx
Normal file
284
src/pages/Projects.jsx
Normal file
@@ -0,0 +1,284 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import axios from "axios";
|
||||
import Slider from "react-slick";
|
||||
import heroBg from "../assets/projects-hero.jpg";
|
||||
import "../styles/Projects.css";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
/* =====================
|
||||
Custom Arrows
|
||||
===================== */
|
||||
const NextArrow = ({ className, style, onClick }) => (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
...style,
|
||||
display: "block",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
borderRadius: "50%",
|
||||
padding: "10px",
|
||||
right: "10px",
|
||||
zIndex: 2,
|
||||
}}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const PrevArrow = ({ className, style, onClick }) => (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
...style,
|
||||
display: "block",
|
||||
background: "rgba(0,0,0,0.5)",
|
||||
borderRadius: "50%",
|
||||
padding: "10px",
|
||||
left: "10px",
|
||||
zIndex: 2,
|
||||
}}
|
||||
onClick={onClick}
|
||||
/>
|
||||
);
|
||||
|
||||
const Projects = () => {
|
||||
const [selectedSector, setSelectedSector] = useState("all");
|
||||
const [projects, setProjects] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expandedDescriptions, setExpandedDescriptions] = useState({});
|
||||
const [lightboxImage, setLightboxImage] = useState(null);
|
||||
|
||||
const sectorRef = useRef(null);
|
||||
|
||||
const sectors = [
|
||||
{ label: "All", value: "all" },
|
||||
{ label: "Water Supply", value: "water supply" },
|
||||
{ label: "Storm Water", value: "storm water" },
|
||||
{ label: "Electromechanical", value: "electromechanical" },
|
||||
{ label: "Real Estate / Buildings", value: "real estate / buildings" },
|
||||
{ label: "Tunnel", value: "tunnel" },
|
||||
{ label: "Roads", value: "roads" },
|
||||
{ label: "Wastewater / Sewerage", value: "wastewater / sewerage" },
|
||||
{ label: "Irrigation", value: "irrigation" },
|
||||
{ label: "Renewable Energy", value: "renewable energy" },
|
||||
];
|
||||
|
||||
/* =====================
|
||||
Fetch Projects
|
||||
===================== */
|
||||
useEffect(() => {
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const res = await axios.get(
|
||||
`${process.env.REACT_APP_API_BASE_URL}/api/projects`
|
||||
);
|
||||
setProjects(Array.isArray(res.data) ? res.data : []);
|
||||
} catch (err) {
|
||||
console.error("Error fetching projects:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
/* =====================
|
||||
Scroll to sectors
|
||||
===================== */
|
||||
useEffect(() => {
|
||||
if (window.location.hash === "#sectors" && sectorRef.current) {
|
||||
setTimeout(() => {
|
||||
sectorRef.current.scrollIntoView({ behavior: "smooth" });
|
||||
}, 200);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const filteredProjects = projects.filter((p) => {
|
||||
if (selectedSector === "all") return true;
|
||||
return (
|
||||
p.sector &&
|
||||
p.sector.toLowerCase().trim() === selectedSector.toLowerCase().trim()
|
||||
);
|
||||
});
|
||||
|
||||
const toggleDescription = (id) => {
|
||||
setExpandedDescriptions((prev) => ({
|
||||
...prev,
|
||||
[id]: !prev[id],
|
||||
}));
|
||||
};
|
||||
|
||||
/* =====================
|
||||
Slider Settings
|
||||
===================== */
|
||||
const sliderSettings = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 600,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 1500,
|
||||
arrows: true,
|
||||
nextArrow: <NextArrow />,
|
||||
prevArrow: <PrevArrow />,
|
||||
responsive: [
|
||||
{ breakpoint: 1024, settings: { slidesToShow: 3 } },
|
||||
{ breakpoint: 768, settings: { slidesToShow: 2 } },
|
||||
{ breakpoint: 480, settings: { slidesToShow: 1 } },
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* =====================
|
||||
Hero Section
|
||||
====================== */}
|
||||
<div
|
||||
className="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
|
||||
style={{ backgroundImage: `url(${heroBg})` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
|
||||
<div className="relative z-10 text-center px-4">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white">
|
||||
Our Projects
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl md:text-2xl text-white mt-2 italic">
|
||||
Stronger Partnerships, Greater Success
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* =====================
|
||||
Sector Buttons
|
||||
====================== */}
|
||||
<div
|
||||
ref={sectorRef}
|
||||
className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 px-4 mt-8 mb-10"
|
||||
>
|
||||
{sectors.map((sector, index) => {
|
||||
const bgColors = [
|
||||
"bg-gradient-to-r from-blue-500 to-indigo-500",
|
||||
"bg-gradient-to-r from-green-400 to-green-600",
|
||||
"bg-gradient-to-r from-yellow-400 to-yellow-600",
|
||||
"bg-gradient-to-r from-pink-400 to-pink-600",
|
||||
"bg-gradient-to-r from-purple-400 to-purple-600",
|
||||
"bg-gradient-to-r from-red-400 to-red-600",
|
||||
];
|
||||
|
||||
const isSelected = selectedSector === sector.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={sector.value}
|
||||
onClick={() => setSelectedSector(sector.value)}
|
||||
className={`text-white font-semibold px-5 py-3 rounded-2xl shadow-lg transition-all duration-300 hover:scale-105
|
||||
${bgColors[index % bgColors.length]}
|
||||
${isSelected ? "ring-4 ring-white ring-offset-2" : ""}`}
|
||||
>
|
||||
{sector.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* =====================
|
||||
Projects Slider
|
||||
====================== */}
|
||||
<div className="px-6 mb-16">
|
||||
{loading ? (
|
||||
<p className="text-center text-xl text-gray-500">Loading projects...</p>
|
||||
) : filteredProjects.length === 0 ? (
|
||||
<p className="text-center text-xl text-gray-600">
|
||||
No projects available.
|
||||
</p>
|
||||
) : (
|
||||
<Slider key={selectedSector} {...sliderSettings}>
|
||||
{filteredProjects.map((project) => (
|
||||
<div key={project.id} className="px-2">
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition">
|
||||
|
||||
{/* ✅ FIXED IMAGE SIZE (NO BIG / SMALL ISSUE) */}
|
||||
{project.image && (
|
||||
<div className="relative w-full aspect-[16/9] bg-gray-200 overflow-hidden">
|
||||
<img
|
||||
src={`${process.env.REACT_APP_API_BASE_URL}${project.image}`}
|
||||
alt={project.name}
|
||||
className="absolute inset-0 w-full h-full object-cover cursor-pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setLightboxImage(
|
||||
`${process.env.REACT_APP_API_BASE_URL}${project.image}`
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="p-4">
|
||||
<h3 className="text-lg font-bold text-blue-800">
|
||||
{project.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
Sector: {project.sector}
|
||||
</p>
|
||||
|
||||
{project.location && (
|
||||
<p className="text-sm text-gray-600">
|
||||
Location: {project.location}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{project.description && (
|
||||
<p className="text-sm text-gray-700 mt-2">
|
||||
{expandedDescriptions[project.id]
|
||||
? project.description
|
||||
: project.description.slice(0, 100) + "..."}
|
||||
{project.description.length > 100 && (
|
||||
<button
|
||||
onClick={() => toggleDescription(project.id)}
|
||||
className="ml-2 text-blue-600 underline text-sm"
|
||||
>
|
||||
{expandedDescriptions[project.id]
|
||||
? "Read Less"
|
||||
: "Read More"}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* =====================
|
||||
Image Lightbox
|
||||
====================== */}
|
||||
{lightboxImage && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
|
||||
onClick={() => setLightboxImage(null)}
|
||||
>
|
||||
<div className="relative" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
onClick={() => setLightboxImage(null)}
|
||||
className="absolute -top-4 -right-4 text-white text-3xl font-bold"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<img
|
||||
src={lightboxImage}
|
||||
alt="Project"
|
||||
className="max-w-[90vw] max-h-[90vh] object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Projects;
|
||||
0
src/pages/ScrollDownArrow.jsx
Normal file
0
src/pages/ScrollDownArrow.jsx
Normal file
Reference in New Issue
Block a user