laxmibamnale/lcepl-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated AboutUs, ClientsSection, SectorsSlider with hover effects and styling improvements

Browse Source
This commit is contained in:
LaxmiB
2025-12-31 16:14:29 +05:30
parent b6225ed174
commit 2c14ebacf5
4 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ClientsSection.jsx
View File

@@ -121,7 +121,7 @@ const ClientsSection = () => {
whileTap="tap"
animate={selectedCard === clientKey ? "tap" : "visible"}
onClick={() => handleCardClick(clientKey)}
className="inline-flex flex-col items-center justify-center mx-2 md:mx-4 bg-white p-3 md:p-4 rounded-lg shadow-md w-36 h-32 md:w-48 md:h-40 flex-shrink-0 cursor-pointer relative z-0"
className="inline-flex flex-col items-center justify-center mx-2 md:mx-4 bg-white p-3 md:p-4 rounded-lg shadow-md w-44 h-40 md:w-56 md:h-48 flex-shrink-0 cursor-pointer relative z-0"
style={{
zIndex: selectedCard === clientKey ? 10 : 1
}}

6
src/components/SectorsSlider.jsx
View File

@@ -20,15 +20,15 @@ const sectors = [
{
title: "Storm Water",
icon: stormIcon,
description: "LCEPL provides efficient storm water solutions to prevent flooding, protect infrastructure, and ensure environmental safety. Our expertise includes designing and constructing drainage systems, retention structures, and rainwater harvesting facilities. We integrate sustainable methods like permeable pavements and bioswales to manage runoff effectively. With advanced engineering and proven execution, we deliver reliable solutions for urban and industrial needs.S",
description: "LCEPL provides efficient storm water solutions to prevent flooding, protect infrastructure, and ensure environmental safety. Our expertise includes designing and constructing drainage systems, retention structures, and rainwater harvesting facilities. We integrate sustainable methods like permeable pavements and bioswales to manage runoff effectively. With advanced engineering and proven execution, we deliver reliable solutions for urban and industrial needs.",
},
{
title: "Electromechanical & Instrumentation",
icon: electroIcon,
description: "LCEPL offers end-to-end solutions in pump systems—from project design and consultation to installation, operation, and maintenance of horizontal split casing, vertical turbine, and submersible pumps. The company handles complex installations, including floating pontoon setups and high-voltage turnkey projects, delivering complete electrical substation installations. Expertise spans pumping machinery up to 30,000 HP, high-voltage switchyards, transformers up to 26 MVA, and advanced surge protection systems for diverse schemes.",
description: "LCEPL provides complete pump system solutions, from design and consultation to installation and maintenance. The company handles complex projects, including floating pontoon setups and high-voltage turnkey installations, with expertise in pumps up to 30,000 HP, transformers up to 26 MVA, and advanced surge protection systems.",
},
{
title: "Real Estate / Buildings",
title: "Real Estate/Buildings",
icon: realEstateIcon,
description: "LCEPL delivers end-to-end civil engineering solutions for residential, commercial, and industrial real estate / buildings projects. Our expertise spans land development, structural construction, and infrastructure integration with a focus on quality and timely delivery. We ensure sustainable design, robust engineering, and adherence to safety and regulatory standards to create lasting value for our clients.",
},

16
src/pages/AboutUs.jsx
View File

@@ -144,15 +144,15 @@ const AboutUs = () => {
<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 },
{ title: "Civil Engineering", desc: "Urban infrastructure, roadworks, dams, WTPs, STPs, stormwater management, and structural development.", bg: civilBg },
{ title: "Mechanical Engineering", desc: "Fabrication, installation, and maintenance of industrial systems, heavy machinery, and automated solutions including SCADA.", bg: mechanicalBg },
{ title: "Electrical Engineering", desc: "Reliable installations, power distribution, and maintenance services.", bg: electricalBg },
{ title: "Electromechanical & Instrumentation", desc: "Integration of mechanical and electrical systems for pumping stations and automation.", bg: electromechanicalBg },
{ title: "Information Technology", desc: "Project planning, GIS, data systems, and automation tools for smart engineering.", bg: itBg },
{ title: "Renewable Energy", 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 key={idx} className="relative field-card rounded-xl shadow-lg overflow-hidden transition-all cursor-pointer bg-cover bg-center group hover:shadow-2xl" style={{ backgroundImage: `url(${field.bg})` }}>
<div className="absolute inset-0 bg-black/50 group-hover:bg-black/25 transition-all duration-300"></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>

11
src/styles/SectorsSlider.css
View File

@@ -95,8 +95,9 @@
.infraInfo p {
font-size: 1.1rem;
color: #475569;
line-height: 1.8;
/* line-height: 1.8; */
margin-bottom: 2.5rem;
text-align: justify;
}
/* Slider Navigation Arrows */
@@ -107,7 +108,7 @@
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
transform: translateY(-150%);
padding: 0 15px;
z-index: 10;
}
@@ -173,7 +174,7 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 0 1.5rem;
padding: 0 0.5rem;
gap: 1rem;
}
.infraWrap.active {
@@ -187,7 +188,7 @@
width: 100%;
padding: 0;
margin: 0;
text-align: center;
text-align: -webkit-center;
}
.sector-card {
@@ -203,7 +204,7 @@
.infraInfo h2 { font-size: 1.8rem; }
.infraInfo h3 { font-size: 1.2rem; }
.infraInfo p { font-size: 1rem; margin-bottom: 1.5rem; }
.indicators { bottom: 1rem; }
}