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

first commit

Browse Source
This commit is contained in:
priyanshuvish
2025-08-28 13:14:51 +05:30
commit b9bf8ce99e
176 changed files with 51228 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

693
src/components/services/Consulting.tsx Normal file
View File

@@ -0,0 +1,693 @@
import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
import { Card, CardContent } from '../ui/card';
import { Badge } from '../ui/badge';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { TestimonialsSection } from '../TestimonialsSection';
import { CTABannerSection } from '../CTABannerSection';
import StackedOfferSection from '../StackedOfferSection';
import {
Users,
Target,
ArrowRight,
CheckCircle,
Lightbulb,
Brain,
Eye,
TrendingUp,
MessageCircle,
BarChart3,
Compass,
Shield,
Network,
Zap,
Settings,
ChevronDown,
ChevronUp,
ArrowLeft,
Download,
Crown
} from 'lucide-react';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
// Strategic consulting cards data for the stacking section
const consultingCards = [
{
id: 1,
title: "Organizational Structure Design",
subtitle: "Strategic Design & Optimization",
description:
"Comprehensive organizational design services that optimize structure, roles, and reporting relationships for enhanced performance and strategic alignment across all business functions.",
badge: "Featured",
color: "from-blue-600 to-blue-700",
icon: Network,
features: ["Organizational Assessment", "Structure Optimization", "Role Clarification", "Governance Design"],
stats: [
{ label: "Success Rate", value: "96%" },
{ label: "Organizations", value: "250+" },
{ label: "Duration", value: "3-6 Mo" }
]
},
{
id: 2,
title: "Vision & Mission Redefinition",
subtitle: "Purpose-Driven Strategic Alignment",
description:
"Collaborative development of inspiring vision and mission statements that drive organizational alignment, stakeholder engagement, and sustainable competitive advantage.",
badge: "Strategic",
color: "from-purple-600 to-purple-700",
icon: Compass,
features: ["Stakeholder Engagement", "Values Articulation", "Purpose Definition", "Strategic Narrative"],
stats: [
{ label: "Alignment Rate", value: "92%" },
{ label: "Leaders Engaged", value: "500+" },
{ label: "Duration", value: "2-4 Mo" }
]
},
{
id: 3,
title: "Leadership Capability Building",
subtitle: "Strategic Leadership Development",
description:
"Systematic development of leadership capabilities aligned with organizational strategy, including succession planning, talent development, and leadership pipeline optimization.",
badge: "Popular",
color: "from-green-600 to-green-700",
icon: TrendingUp,
features: ["Capability Frameworks", "Leadership Pipeline", "Succession Planning", "Talent Development"],
stats: [
{ label: "Development Rate", value: "89%" },
{ label: "Leaders Developed", value: "1,000+" },
{ label: "Duration", value: "6-12 Mo" }
]
},
{
id: 4,
title: "Strategic Transformation",
subtitle: "End-to-End Change Management",
description:
"Complete transformation support for major organizational change initiatives, including change strategy, stakeholder alignment, and cultural integration for sustainable success.",
badge: "Comprehensive",
color: "from-orange-600 to-orange-700",
icon: Zap,
features: ["Change Strategy", "Stakeholder Alignment", "Implementation Roadmap", "Culture Integration"],
stats: [
{ label: "Success Rate", value: "91%" },
{ label: "Transformations", value: "180+" },
{ label: "Duration", value: "12-24 Mo" }
]
}
];
const targetAudience = [
{
title: "Founders & CXOs",
description: "Visionary leaders driving organizational transformation and strategic growth",
icon: Lightbulb,
characteristics: ["Strategic vision", "Growth focus", "Change leadership", "Stakeholder management"]
},
{
title: "Boards",
description: "Board members seeking governance excellence and strategic oversight capabilities",
icon: Shield,
characteristics: ["Governance focus", "Risk oversight", "Strategic guidance", "Performance monitoring"]
},
{
title: "OD Leaders",
description: "Organizational development professionals implementing systematic change initiatives",
icon: Settings,
characteristics: ["Change expertise", "System thinking", "Process optimization", "Culture development"]
}
];
const outcomes = [
{
title: "Clarity in Leadership Direction",
description: "Clear strategic direction with aligned leadership behaviors and decision-making",
icon: Compass,
metrics: "96% of leadership teams report improved strategic clarity and alignment"
},
{
title: "Scalable Org Models",
description: "Organizational structures that support growth while maintaining operational efficiency",
icon: Network,
metrics: "78% improvement in organizational agility and decision-making speed"
},
{
title: "Faster Decision-Making & Alignment",
description: "Streamlined processes that enable rapid, informed decision-making across the organization",
icon: Zap,
metrics: "65% reduction in decision cycle time with improved cross-functional alignment"
}
];
const approachSteps = [
{
step: "01",
title: "Strategic Assessment",
description: "Comprehensive analysis of organizational current state, strategic challenges, and transformation opportunities. Together, we make your vision manifest through proven assessment methodologies and frameworks.",
details: ["Organizational scan", "Stakeholder interviews", "Performance analysis", "Gap assessment"],
icon: Eye
},
{
step: "02",
title: "Co-Creation Process",
description: "Collaborative design sessions with leadership to develop tailored strategic solutions and alignment. Together, we make your vision manifest through structured co-creation methodologies and proven frameworks.",
details: ["Leadership workshops", "Co-design sessions", "Stakeholder alignment", "Solution development"],
icon: Users
},
{
step: "03",
title: "Implementation Support",
description: "Hands-on guidance and support throughout the strategic transformation implementation journey. Together, we make your vision manifest through comprehensive support methodologies and proven frameworks.",
details: ["Change management", "Project oversight", "Training delivery", "Progress monitoring"],
icon: TrendingUp
},
{
step: "04",
title: "Continuous Optimization",
description: "Ongoing refinement and optimization to ensure sustainable transformation success and impact. Together, we make your vision manifest through continuous improvement methodologies and proven frameworks.",
details: ["Performance tracking", "Feedback integration", "Process refinement", "Capability building"],
icon: BarChart3
}
];
export function Consulting() {
const [expandedAudienceIndex, setExpandedAudienceIndex] = useState<number | null>(0);
useEffect(() => {
window.scrollTo(0, 0);
}, []);
const toggleAudienceExpanded = (index: number) => {
setExpandedAudienceIndex(expandedAudienceIndex === index ? null : index);
};
return (
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
{/* Hero Section */}
<section className="relative min-h-[90vh] flex flex-col">
<div className="absolute inset-0 z-0">
<ImageWithFallback
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1920&h=1080&fit=crop"
alt="Strategic consulting meeting - business transformation"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
</div>
<div className="relative z-10 flex-1 flex items-center">
<div className="container 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>
<span className="text">Strategic Advisory</span>
</div>
<h1 className="text-h1-white mb-6">
Strategic Consulting Services
</h1>
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
Expert strategic guidance for organizational transformation. Drive clarity,
alignment, and sustainable business growth through proven consulting methodologies.
</p>
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
<PrimaryCTAButton
text="Book a consultation"
onClick={() => navigateTo('/contact')}
className="management-dev-primary-cta"
/>
<Button
onClick={() => window.open('/strategic-overview', '_blank')}
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border text-white transition-all duration-300"
style={{
fontFamily: 'var(--font-family-base)'
}}
>
<Download className="w-5 h-5 mr-2" />
Download Overview
</Button>
</div>
</div>
</div>
</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="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>
<div className="text-small-white opacity-90">Strategic alignment improvement</div>
</div>
<div>
<div className="text-h2-white mb-2">250+</div>
<div className="text-small-white opacity-90">Organizations transformed</div>
</div>
<div>
<div className="text-h2-white mb-2">78%</div>
<div className="text-small-white opacity-90">Faster decision-making</div>
</div>
<div>
<div className="text-h2-white mb-2">91%</div>
<div className="text-small-white opacity-90">Client satisfaction rating</div>
</div>
</div>
</div>
</div>
</section>
{/* Stacked Offer Section */}
<StackedOfferSection cards={consultingCards} />
{/* Who It's For Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container 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">
Who It's <span className="text-primary">For</span>
</h2>
<p className="text-body-lg text-muted leading-relaxed">
Our strategic consulting services are designed for leaders and organizations
committed to transformation, growth, and sustainable competitive advantage.
</p>
</div>
<div className="space-y-1">
{targetAudience.map((audience, index) => (
<div
key={index}
className="border-b border-gray-400 last:border-b-0"
>
<button
onClick={() => toggleAudienceExpanded(index)}
className="w-full py-6 px-0 flex items-center justify-between text-left hover:bg-transparent focus:outline-none group transition-all duration-200"
style={{ backgroundColor: 'transparent' }}
>
<span className="text-h4 text-black group-hover:text-primary transition-colors duration-200 pr-4">
{audience.title}
</span>
<div className="flex-shrink-0 ml-4">
{expandedAudienceIndex === index ? (
<ChevronUp className="w-6 h-6 text-primary transition-transform duration-200" />
) : (
<ChevronDown className="w-6 h-6 text-gray-400 group-hover:text-primary transition-all duration-200" />
)}
</div>
</button>
<div className={`overflow-hidden transition-all duration-300 ease-in-out ${
expandedAudienceIndex === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
}`}>
<div className="pb-6 pr-8">
<p className="text-body text-muted leading-relaxed mb-4">
{audience.description}
</p>
<div className="flex flex-wrap gap-2">
{audience.characteristics.map((characteristic, charIndex) => (
<Badge key={charIndex} variant="outline" className="text-small" style={{ fontFamily: 'var(--font-family-base)' }}>
{characteristic}
</Badge>
))}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</section>
{/* Expected Outcomes Section */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container 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>
</h2>
<p className="text-body-lg text-muted">
Our strategic consulting delivers measurable improvements in organizational
clarity, agility, and decision-making effectiveness across all business functions.
</p>
</div>
{/* Three-Column Layout - Reference Design Style */}
<div className="grid lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
{/* Clarity in Leadership Direction */}
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
<div className="mb-8">
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center mb-6">
<Compass className="w-10 h-10 text-primary" />
</div>
<h3 className="text-h3 text-black mb-4">
Clarity in Leadership Direction
</h3>
<p className="text-body text-muted leading-relaxed mb-8">
Clear strategic direction with aligned leadership behaviors and
decision-making frameworks for enhanced organizational effectiveness.
</p>
</div>
{/* Strategic Leadership Visualization */}
<div className="space-y-6">
<div className="flex justify-between items-center">
<span className="text-small text-muted font-medium">Strategic Clarity</span>
<span className="text-h4 text-green-600 font-bold">+96%</span>
</div>
<div className="relative">
<div className="flex items-end space-x-1 h-24 mb-4">
<div className="bg-gray-200 h-8 w-4 rounded-sm"></div>
<div className="bg-gray-300 h-12 w-4 rounded-sm"></div>
<div className="bg-gray-200 h-16 w-4 rounded-sm"></div>
<div className="bg-gray-300 h-10 w-4 rounded-sm"></div>
<div className="bg-green-400 h-20 w-4 rounded-sm"></div>
<div className="bg-green-500 h-24 w-4 rounded-sm"></div>
<div className="bg-green-600 h-22 w-4 rounded-sm"></div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-100">
<div className="text-xl font-bold text-primary">94%</div>
<div className="text-small text-muted">Alignment</div>
</div>
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
<div className="text-xl font-bold text-green-600">91%</div>
<div className="text-small text-muted">Direction</div>
</div>
</div>
</div>
</div>
{/* Scalable Org Models */}
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
<div className="mb-8">
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-yellow-50 to-yellow-100 flex items-center justify-center mb-6">
<Network className="w-10 h-10 text-accent" />
</div>
<h3 className="text-h3 text-black mb-4">
Scalable Org Models
</h3>
<p className="text-body text-muted leading-relaxed mb-8">
Organizational structures that support growth while maintaining
operational efficiency and strategic flexibility.
</p>
</div>
{/* Scalable Organization Metrics */}
<div className="space-y-6">
<div className="flex items-center justify-between mb-4">
<span className="text-small text-muted font-medium">Organizational Agility</span>
<div className="flex items-center">
<TrendingUp className="w-4 h-4 text-green-500 mr-1" />
<span className="text-small text-green-600 font-medium">+78%</span>
</div>
</div>
<div className="relative bg-gray-100 rounded-full h-3 mb-6">
<div
className="bg-gradient-to-r from-yellow-400 to-yellow-500 h-3 rounded-full transition-all duration-1000"
style={{ width: '78%' }}
></div>
</div>
<div className="space-y-3">
<div className="flex justify-between items-center py-2">
<span className="text-small text-muted">Decision Speed</span>
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
82%
</div>
</div>
<div className="flex justify-between items-center py-2">
<span className="text-small text-muted">Structure Efficiency</span>
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
76%
</div>
</div>
<div className="flex justify-between items-center py-2">
<span className="text-small text-muted">Growth Readiness</span>
<div className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-small font-medium">
84%
</div>
</div>
</div>
</div>
</div>
{/* Faster Decision-Making & Alignment */}
<div className="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300">
<div className="mb-8">
<div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center mb-6">
<Zap className="w-10 h-10 text-primary" />
</div>
<h3 className="text-h3 text-black mb-4">
Faster Decision-Making & Alignment
</h3>
<p className="text-body text-muted leading-relaxed mb-8">
Streamlined processes that enable rapid, informed decision-making
with improved cross-functional alignment.
</p>
</div>
{/* Decision-Making KPIs */}
<div className="space-y-6">
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-100">
<div className="flex items-center justify-center mb-1">
<span className="text-small text-muted mr-2">Speed</span>
<TrendingUp className="w-3 h-3 text-green-500" />
</div>
<div className="text-xl font-bold text-primary">65%</div>
</div>
<div className="text-center p-3 bg-green-50 rounded-lg border border-green-100">
<div className="flex items-center justify-center mb-1">
<span className="text-small text-muted mr-2">Alignment</span>
<div className="w-3 h-3 flex items-center justify-center">
<div className="w-0 h-0 border-l-2 border-r-2 border-b-3 border-transparent border-b-green-500"></div>
</div>
</div>
<div className="text-xl font-bold text-green-500">89%</div>
</div>
</div>
<div className="bg-gray-50 rounded-lg p-4">
<div className="flex justify-between items-center mb-2">
<span className="text-small text-muted font-medium">Decision Impact</span>
<span className="text-small text-primary font-bold">Cycle Time</span>
</div>
<div className="flex items-end justify-between">
<div className="text-2xl font-bold text-primary">91%</div>
<div className="text-2xl font-bold text-green-600">-65%</div>
</div>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="text-center">
<div className="text-lg font-bold text-primary">91%</div>
<div className="text-xs text-muted">Quality</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-green-600">-65%</div>
<div className="text-xs text-muted">Time Reduction</div>
</div>
<div className="text-center">
<div className="text-lg font-bold text-blue-500">89%</div>
<div className="text-xs text-muted">Alignment</div>
</div>
</div>
</div>
</div>
</div>
{/* Results Confirmation Banner */}
<div className="mt-16 max-w-4xl mx-auto">
<div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-xl p-6 border border-green-200">
<div className="flex items-center justify-center gap-3">
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
<CheckCircle className="w-5 h-5 text-green-600" />
</div>
<p className="text-body text-center" style={{ fontWeight: 'var(--font-weight-subhead)', color: '#059669' }}>
All outcomes measured within 4-6 months of engagement completion
</p>
</div>
</div>
</div>
</div>
</section>
{/* Our Approach Section - Carousel Design */}
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
<div className="container 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 */}
<div className="lg:col-span-5 lg:pr-8">
<h2 className="text-h2 mb-6 leading-tight">
Our <span className="text-primary">Approach</span>
</h2>
<p className="text-body-lg text-muted leading-relaxed mb-8">
Co-creation model with leadership using proven strategic methodologies: organizational
assessments, stakeholder interviews, and collaborative consulting for maximum impact.
</p>
{/* Navigation Controls */}
<div className="flex gap-3">
<button
onClick={() => {
const container = document.getElementById('consulting-approach-carousel');
if (container) {
container.scrollBy({ left: -384, behavior: 'smooth' });
}
}}
className="w-12 h-12 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-all duration-300 flex items-center justify-center border border-gray-200 hover:border-primary"
aria-label="Previous approach step"
>
<ArrowLeft className="w-5 h-5" />
</button>
<button
onClick={() => {
const container = document.getElementById('consulting-approach-carousel');
if (container) {
container.scrollBy({ left: 384, behavior: 'smooth' });
}
}}
className="w-12 h-12 rounded-full bg-gray-100 hover:bg-primary hover:text-white transition-all duration-300 flex items-center justify-center border border-gray-200 hover:border-primary"
aria-label="Next approach step"
>
<ArrowRight className="w-5 h-5" />
</button>
</div>
</div>
{/* Right Side - Scrollable Approach Cards */}
<div className="lg:col-span-7 relative">
<div
id="consulting-approach-carousel"
className="flex gap-6 overflow-x-auto pb-4"
style={{
scrollSnapType: 'x mandatory',
WebkitOverflowScrolling: 'touch',
msOverflowStyle: 'none',
scrollbarWidth: 'none'
}}
>
{approachSteps.map((step, index) => (
<div
key={index}
className="flex-shrink-0 w-96 bg-white rounded-2xl border border-gray-200 p-8 shadow-md hover:shadow-2xl transition-all duration-300 hover:transform hover:scale-[1.02]"
style={{ scrollSnapAlign: 'start' }}
>
{/* Step Number */}
<div className="flex items-center justify-between mb-6">
<div
className="leading-none font-medium"
style={{
fontSize: 'var(--font-h2)',
fontWeight: '500',
lineHeight: 'var(--line-height-h2)',
color: 'var(--color-accent)',
fontFamily: 'var(--font-family-base)'
}}
>
{step.step}
</div>
<div className="w-16 h-0.5 bg-gradient-to-r from-accent to-transparent opacity-40"></div>
</div>
{/* Step Title */}
<h3
className="leading-tight mb-6"
style={{
fontSize: 'var(--font-h3)',
fontWeight: 'var(--font-weight-h3)',
lineHeight: 'var(--line-height-h3)',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
}}
>
{step.title}
</h3>
{/* Step Description */}
<p
className="leading-relaxed mb-6"
style={{
fontSize: 'var(--font-body)',
lineHeight: 'var(--line-height-body)',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-gray-muted)'
}}
>
{step.description}
</p>
{/* Bullet Points */}
<div className="space-y-3">
{step.details.map((detail, detailIndex) => (
<div key={detailIndex} className="flex items-start gap-3">
<div className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0 mt-2"></div>
<span
className="leading-relaxed"
style={{
fontSize: 'var(--font-small)',
lineHeight: 'var(--line-height-small)',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
}}
>
{detail}
</span>
</div>
))}
</div>
</div>
))}
</div>
{/* Right Side Fade Overlay */}
<div
className="absolute top-0 right-0 h-full w-16 pointer-events-none z-10"
style={{
background: 'linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 100%)'
}}
></div>
{/* Hide scrollbar with CSS */}
<style>{`
#consulting-approach-carousel::-webkit-scrollbar {
display: none;
}
`}</style>
</div>
</div>
</div>
</section>
{/* Testimonials Section - Using home page testimonials with custom headers */}
<TestimonialsSection
title="What Our Clients Say"
subtitle="Success stories from CXOs, founders, and board members who have achieved transformational results through our strategic consulting services."
tagText="Client Success Stories"
/>
{/* CTA Section - Using standardized home page CTA */}
<CTABannerSection />
</div>
);
}