KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive and other changes

Browse Source
This commit is contained in:
priyanshuvish
2025-09-05 12:20:05 +05:30
parent 62cff29657
commit a43225db9b
18 changed files with 228 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/BookFacility.tsx
View File

@@ -227,7 +227,7 @@ export function BookFacility() {
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
<div className="pt-40 pb-16">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="max-w-2xl mx-auto text-center">
<div
className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"
@@ -295,7 +295,7 @@ export function BookFacility() {
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
<div className="pt-40 pb-16">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="max-w-2xl mx-auto text-center">
<div
className="w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6"
@@ -355,7 +355,7 @@ export function BookFacility() {
return (
<div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
<div className="pt-40 pb-16">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="max-w-4xl mx-auto">
{/* Confirmation Header */}
<div className="text-center mb-8">
@@ -637,7 +637,7 @@ export function BookFacility() {
</section>
<div id="booking-section" className="py-8 lg:py-12">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="max-w-6xl mx-auto">
{/* Back Button */}
<Button

2
src/components/README-ReusableCarousel.md
View File

@@ -197,7 +197,7 @@ const trainingConfig: CarouselConfig = {
export function TrainingSection() {
return (
<section className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<ReusableCarousel
items={trainingPrograms}
config={trainingConfig}

2
src/components/StackedOfferSection.tsx
View File

@@ -189,7 +189,7 @@ export default function StackedOfferSection({
className="sticky top-0 py-20 min-h-screen flex items-center justify-center z-10"
style={{ backgroundColor: '#FFFFFF' }}
>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Heading */}
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">

10
src/components/VirtualTour.tsx
View File

@@ -417,7 +417,7 @@ export function VirtualTour() {
</button>
{/* Hero Content */}
<div className="relative z-10 container mx-auto section-margin-x h-full flex flex-col justify-center">
<div className="relative z-10 mx-auto section-margin-x h-full flex flex-col justify-center">
<div className="max-w-6xl mx-auto text-center space-y-12">
{/* Main Content */}
@@ -469,7 +469,7 @@ export function VirtualTour() {
{/* Facility Stats Card */}
<div className="relative z-30 -mt-20 mb-12">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="flex justify-center">
<Card className="border border-border/30 shadow-lg rounded-xl overflow-hidden max-w-4xl w-full" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<CardContent className="p-6">
@@ -527,7 +527,7 @@ export function VirtualTour() {
{/* Virtual Tour Section */}
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{!isVirtualTourActive ? (
/* Tour Preview */
<div className="text-center max-w-7xl mx-auto space-y-16">
@@ -1215,7 +1215,7 @@ export function VirtualTour() {
{/* FAQ Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-3xl mx-auto space-y-6 mb-16">
<Badge
className="text-body px-4 py-2"
@@ -1303,7 +1303,7 @@ export function VirtualTour() {
background: 'linear-gradient(to right, var(--color-primary), var(--color-primary), rgba(4, 4, 91, 0.9))'
}}
>
<div className="container mx-auto section-margin-x text-center">
<div className="mx-auto section-margin-x text-center">
<div className="max-w-4xl mx-auto space-y-8">
<h2 className="text-h2 text-white">
Ready to Transform Your Team?

14
src/components/about/OurExpertise.tsx
View File

@@ -118,7 +118,7 @@ export function OurExpertise() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -158,7 +158,7 @@ export function OurExpertise() {
{/* Statistics Section - Embedded in Hero */}
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">152+</div>
@@ -193,7 +193,7 @@ export function OurExpertise() {
{/* Expertise Overview - Clean Standard Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16">
<h2 className="text-h2 mb-6">Four Pillars of Excellence</h2>
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
@@ -475,7 +475,7 @@ export function OurExpertise() {
{/* Consulting & Advisory Section - Reusable Carousel Design */}
<section id="consulting" className="py-24" style={{ backgroundColor: 'rgba(247, 247, 253, 0.3)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Using the new reusable carousel component */}
<ConsultingServicesCarousel consultingServices={consultingServices} />
</div>
@@ -483,7 +483,7 @@ export function OurExpertise() {
{/* Leadership Development Section - Split Layout */}
<section id="leadership-development" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Leadership Development Framework - Our Vision Style */}
<div className="max-w-7xl mx-auto mb-16">
<div className="grid lg:grid-cols-3 gap-16 items-start">
@@ -690,7 +690,7 @@ export function OurExpertise() {
{/* Platform Features Section - Redesigned Layout */}
<section id="platform-features" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Header */}
<div className="text-center mb-20">
<Badge
@@ -981,7 +981,7 @@ export function OurExpertise() {
{/* Case Studies Section - Success Stories */}
<section id="case-studies" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16">
<Badge
className="mb-6 text-body px-4 py-2"

8
src/components/about/OurImpact.tsx
View File

@@ -283,7 +283,7 @@ export function OurImpact() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -323,7 +323,7 @@ export function OurImpact() {
{/* Statistics Section - Embedded in Hero */}
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20" ref={statsRef}>
<div className="container mx-auto section-margin-x py-12">
<div className="mx-auto section-margin-x py-12">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">
@@ -364,7 +364,7 @@ export function OurImpact() {
{/* Partners Section - Redesigned According to JSON Config */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Statistics Section - Landing Page Style */}
@@ -577,7 +577,7 @@ export function OurImpact() {
{/* Additional Metrics Section - Redesigned */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16">
<Badge
className="mb-6 text-body px-4 py-2"

10
src/components/about/OurVision.tsx
View File

@@ -176,7 +176,7 @@ export function OurVision() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -216,7 +216,7 @@ export function OurVision() {
{/* Vision Statistics Section - Embedded in Hero */}
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">3</div>
@@ -241,7 +241,7 @@ export function OurVision() {
{/* Vision Pillars - Redesigned */}
<section id="vision-pillars" className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16">
<Badge
className="mb-6 text-body px-4 py-2"
@@ -396,7 +396,7 @@ export function OurVision() {
{/* How Our Work Aligns - Redesigned Interactive Timeline */}
<section className="py-20" style={{ background: 'linear-gradient(135deg, rgba(247, 247, 253, 0.3) 0%, rgba(248, 195, 1, 0.05) 100%)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16">
<Badge
className="mb-6 text-body px-4 py-2"
@@ -587,7 +587,7 @@ export function OurVision() {
{/* Leadership Framework CTA - Redesigned */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-16 items-center">
{/* Content Side */}

10
src/components/services/Consulting.tsx
View File

@@ -198,7 +198,7 @@ export function Consulting() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -237,7 +237,7 @@ export function Consulting() {
</div>
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">96%</div>
@@ -265,7 +265,7 @@ export function Consulting() {
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
<div className="lg:pr-8">
<h2 className="text-h2 mb-6 text-black leading-tight">
@@ -326,7 +326,7 @@ export function Consulting() {
{/* Expected Outcomes Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
Expected <span className="text-primary">Outcomes</span>
@@ -532,7 +532,7 @@ export function Consulting() {
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title, Description & Navigation */}

10
src/components/services/CultureCompetence.tsx
View File

@@ -202,7 +202,7 @@ export function CultureCompetence() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -241,7 +241,7 @@ export function CultureCompetence() {
</div>
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">87%</div>
@@ -269,7 +269,7 @@ export function CultureCompetence() {
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
<div className="lg:pr-8">
<h2 className="text-h2 mb-6 text-black leading-tight">
@@ -330,7 +330,7 @@ export function CultureCompetence() {
{/* Expected Outcomes Section */}
<section className="py-20" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
Expected <span className="text-primary">Outcomes</span>
@@ -536,7 +536,7 @@ export function CultureCompetence() {
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title, Description & Navigation */}

10
src/components/services/ExecutiveCoaching.tsx
View File

@@ -198,7 +198,7 @@ export function ExecutiveCoaching() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -237,7 +237,7 @@ export function ExecutiveCoaching() {
</div>
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">91%</div>
@@ -265,7 +265,7 @@ export function ExecutiveCoaching() {
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
<div className="lg:pr-8">
<h2 className="text-h2 mb-6 text-black leading-tight">
@@ -326,7 +326,7 @@ export function ExecutiveCoaching() {
{/* Expected Outcomes Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
Expected <span className="text-primary">Outcomes</span>
@@ -532,7 +532,7 @@ export function ExecutiveCoaching() {
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title, Description & Navigation */}

10
src/components/services/LeadershipDevelopment.tsx
View File

@@ -202,7 +202,7 @@ export function LeadershipDevelopment() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -241,7 +241,7 @@ export function LeadershipDevelopment() {
</div>
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
<div>
<div className="text-h2-white mb-2">94%</div>
@@ -269,7 +269,7 @@ export function LeadershipDevelopment() {
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
<div className="lg:pr-8">
<h2 className="text-h2 mb-6 text-black leading-tight">
@@ -330,7 +330,7 @@ export function LeadershipDevelopment() {
{/* Expected Outcomes Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
Expected <span className="text-primary">Outcomes</span>
@@ -536,7 +536,7 @@ export function LeadershipDevelopment() {
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title, Description & Navigation */}

14
src/components/services/LearningFacility.tsx
View File

@@ -496,7 +496,7 @@ export function LearningFacility() {
{/* Centered content */}
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -541,7 +541,7 @@ export function LearningFacility() {
{/* Stat strip */}
<div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
<div className="container mx-auto section-margin-x py-8">
<div className="mx-auto section-margin-x py-8">
<div className="grid grid-cols-3 gap-8 text-center max-w-4xl mx-auto">
<div>
<div className="text-h2-white mb-2">2 Acres</div>
@@ -562,7 +562,7 @@ export function LearningFacility() {
{/* What We Offer Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
What We <span className="text-primary">Offer</span>
@@ -641,7 +641,7 @@ export function LearningFacility() {
{/* Who It's For Section - match Services page (left intro + right accordion list) */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{/* Our Expertise "Our Services" style - horizontal carousel cards */}
<div className="max-w-7xl mx-auto">
{/* Header with eyebrow and controls */}
@@ -791,7 +791,7 @@ export function LearningFacility() {
{/* Facility Features Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="mb-12 relative max-w-7xl mx-auto">
<div className="flex-1 max-w-3xl">
<BrandedTag text="FACILITY FEATURES" />
@@ -895,7 +895,7 @@ export function LearningFacility() {
{/* Amenities Section */}
<section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
World-Class <span className="text-primary">Amenities</span>
@@ -967,7 +967,7 @@ export function LearningFacility() {
{/* Virtual Tour Section */}
<section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
{!isVirtualTourActive ? (
/* Tour Preview */
<div className="max-w-7xl mx-auto space-y-12">

8
src/components/services/ManagementDevelopment.tsx
View File

@@ -199,7 +199,7 @@ export function ManagementDevelopment() {
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center max-w-5xl mx-auto">
<div className="branded-tag-system-white mb-8 justify-center">
<div className="dot"></div>
@@ -266,7 +266,7 @@ export function ManagementDevelopment() {
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid lg:grid-cols-2 gap-16 items-start max-w-7xl mx-auto">
<div className="lg:pr-8">
<h2 className="text-h2 mb-6 text-black leading-tight">
@@ -327,7 +327,7 @@ export function ManagementDevelopment() {
{/* Expected Outcomes Section - Redesigned to Match Reference */}
<section className="py-20" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="text-center mb-16 max-w-4xl mx-auto">
<h2 className="text-h2 mb-6">
Expected <span className="text-primary">Outcomes</span>
@@ -533,7 +533,7 @@ export function ManagementDevelopment() {
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container mx-auto section-margin-x">
<div className="mx-auto section-margin-x">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start max-w-7xl mx-auto">
{/* Left Side - Title, Description & Navigation */}