From 2c14ebacf583f1d246fda269ca65030656a3c75c Mon Sep 17 00:00:00 2001 From: LaxmiB Date: Wed, 31 Dec 2025 16:14:29 +0530 Subject: [PATCH] Updated AboutUs, ClientsSection, SectorsSlider with hover effects and styling improvements --- src/components/ClientsSection.jsx | 2 +- src/components/SectorsSlider.jsx | 6 +++--- src/pages/AboutUs.jsx | 16 ++++++++-------- src/styles/SectorsSlider.css | 11 ++++++----- 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/components/ClientsSection.jsx b/src/components/ClientsSection.jsx index 2a52805..5d35c10 100644 --- a/src/components/ClientsSection.jsx +++ b/src/components/ClientsSection.jsx @@ -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 }} diff --git a/src/components/SectorsSlider.jsx b/src/components/SectorsSlider.jsx index 27cadf0..0b90d9c 100644 --- a/src/components/SectorsSlider.jsx +++ b/src/components/SectorsSlider.jsx @@ -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.", }, diff --git a/src/pages/AboutUs.jsx b/src/pages/AboutUs.jsx index 01fc254..940e264 100644 --- a/src/pages/AboutUs.jsx +++ b/src/pages/AboutUs.jsx @@ -144,15 +144,15 @@ const AboutUs = () => {
{[ - { 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) => ( -
-
+
+
{field.icon}

{field.title}

diff --git a/src/styles/SectorsSlider.css b/src/styles/SectorsSlider.css index 1b5d2d0..770ae9c 100644 --- a/src/styles/SectorsSlider.css +++ b/src/styles/SectorsSlider.css @@ -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; } }