first commit
This commit is contained in:
priyanshuvish
42
src/components/about/BrandedTag.tsx
Normal file
42
src/components/about/BrandedTag.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
interface BrandedTagProps {
|
||||
text: string;
|
||||
className?: string;
|
||||
textColor?: string;
|
||||
variant?: "default" | "white" | "next-steps";
|
||||
}
|
||||
|
||||
export function BrandedTag({
|
||||
text,
|
||||
className = "",
|
||||
textColor,
|
||||
variant = "default",
|
||||
}: BrandedTagProps) {
|
||||
let baseClass = "branded-tag-system";
|
||||
let defaultTextColor = "#26231A"; // Default to black
|
||||
|
||||
if (variant === "white") {
|
||||
baseClass = "branded-tag-system-white";
|
||||
defaultTextColor = "#ffffff"; // White text for dark backgrounds
|
||||
} else if (variant === "next-steps") {
|
||||
baseClass = "branded-tag-system-next-steps";
|
||||
defaultTextColor = "#26231A"; // Brand black for NEXT STEPS
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${baseClass} ${className}`}
|
||||
style={{ marginBottom: "20px" }}
|
||||
>
|
||||
<div className="dot" />
|
||||
<span
|
||||
className="text"
|
||||
style={{
|
||||
color: textColor || defaultTextColor,
|
||||
fontFamily: "var(--font-family-base)",
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1080
src/components/about/OurExpertise.tsx
Normal file
1080
src/components/about/OurExpertise.tsx
Normal file
File diff suppressed because it is too large
Load Diff
739
src/components/about/OurImpact.tsx
Normal file
739
src/components/about/OurImpact.tsx
Normal file
@@ -0,0 +1,739 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
|
||||
import { Badge } from '../ui/badge';
|
||||
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
||||
import { TestimonialsSection } from '../TestimonialsSection';
|
||||
import { navigateTo } from '../Router';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
import {
|
||||
TrendingUp,
|
||||
Users,
|
||||
Award,
|
||||
ArrowRight,
|
||||
Star,
|
||||
Quote,
|
||||
Building,
|
||||
Target,
|
||||
Globe,
|
||||
Sparkles,
|
||||
CheckCircle,
|
||||
BarChart3,
|
||||
PieChart,
|
||||
Activity
|
||||
} from 'lucide-react';
|
||||
// Import the actual logos from Figma assets (same as LogosSection)
|
||||
import imgImage36 from "figma:asset/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png";
|
||||
import imgImage39 from "figma:asset/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png";
|
||||
import imgImage43 from "figma:asset/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png";
|
||||
import imgImage45 from "figma:asset/4833274f0a593cd31fdefe553b70bb016de281af.png";
|
||||
import imgImage38 from "figma:asset/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png";
|
||||
import imgImage47 from "figma:asset/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png";
|
||||
|
||||
const impactStats = [
|
||||
{
|
||||
number: 26643,
|
||||
suffix: "",
|
||||
label: "PARTICIPANTS",
|
||||
description: "Leaders developed across all programs",
|
||||
icon: Users,
|
||||
bgColor: "bg-primary/10"
|
||||
},
|
||||
{
|
||||
number: 1220,
|
||||
suffix: "",
|
||||
label: "PROGRAMS",
|
||||
description: "Successfully delivered initiatives",
|
||||
icon: Target,
|
||||
bgColor: "bg-primary/15"
|
||||
},
|
||||
{
|
||||
number: 152,
|
||||
suffix: "",
|
||||
label: "CLIENTS",
|
||||
description: "Organizations transformed",
|
||||
icon: Building,
|
||||
bgColor: "bg-primary/20"
|
||||
}
|
||||
];
|
||||
|
||||
const clientLogos = [
|
||||
{
|
||||
name: "CANMOOR",
|
||||
logo: imgImage36,
|
||||
sector: "Financial Services",
|
||||
width: 302,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "BlackRock",
|
||||
logo: imgImage45,
|
||||
sector: "Investment Management",
|
||||
width: 210,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "Royal London",
|
||||
logo: imgImage38,
|
||||
sector: "Insurance",
|
||||
width: 145,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "Abstract",
|
||||
logo: imgImage39,
|
||||
sector: "Technology",
|
||||
width: 172,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "ARES",
|
||||
logo: imgImage47,
|
||||
sector: "Asset Management",
|
||||
width: 163,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "KADANS",
|
||||
logo: imgImage43,
|
||||
sector: "Real Estate",
|
||||
width: 206,
|
||||
height: 54
|
||||
},
|
||||
// Add repeats for more variety
|
||||
{
|
||||
name: "CANMOOR",
|
||||
logo: imgImage36,
|
||||
sector: "Financial Services",
|
||||
width: 302,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "BlackRock",
|
||||
logo: imgImage45,
|
||||
sector: "Investment Management",
|
||||
width: 210,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "Royal London",
|
||||
logo: imgImage38,
|
||||
sector: "Insurance",
|
||||
width: 145,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "Abstract",
|
||||
logo: imgImage39,
|
||||
sector: "Technology",
|
||||
width: 172,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "ARES",
|
||||
logo: imgImage47,
|
||||
sector: "Asset Management",
|
||||
width: 163,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "KADANS",
|
||||
logo: imgImage43,
|
||||
sector: "Real Estate",
|
||||
width: 206,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "CANMOOR",
|
||||
logo: imgImage36,
|
||||
sector: "Financial Services",
|
||||
width: 302,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "BlackRock",
|
||||
logo: imgImage45,
|
||||
sector: "Investment Management",
|
||||
width: 210,
|
||||
height: 54
|
||||
},
|
||||
{
|
||||
name: "Royal London",
|
||||
logo: imgImage38,
|
||||
sector: "Insurance",
|
||||
width: 145,
|
||||
height: 54
|
||||
}
|
||||
];
|
||||
|
||||
const testimonialHighlights = [
|
||||
{
|
||||
quote: "KLC's leadership program transformed our entire management approach. The ROI was evident within 6 months.",
|
||||
author: "Rajesh Kumar",
|
||||
position: "CEO, TechVision Ltd",
|
||||
program: "Executive Leadership Program",
|
||||
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop",
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
quote: "The practical frameworks and peer learning experience exceeded our expectations. Highly recommend KLC.",
|
||||
author: "Priya Sharma",
|
||||
position: "VP Operations, Global Manufacturing",
|
||||
program: "Team Leadership Intensive",
|
||||
image: "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop",
|
||||
rating: 5
|
||||
},
|
||||
{
|
||||
quote: "KLC's consulting approach helped us navigate complex organizational change with remarkable success.",
|
||||
author: "Dr. Amit Patel",
|
||||
position: "Director, Healthcare Innovation",
|
||||
program: "Organizational Consulting",
|
||||
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop",
|
||||
rating: 5
|
||||
}
|
||||
];
|
||||
|
||||
// Animated counter component
|
||||
function AnimatedCounter({
|
||||
targetValue,
|
||||
suffix = "",
|
||||
duration = 2000,
|
||||
isVisible = false
|
||||
}: {
|
||||
targetValue: number;
|
||||
suffix?: string;
|
||||
duration?: number;
|
||||
isVisible?: boolean;
|
||||
}) {
|
||||
const [currentValue, setCurrentValue] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) return;
|
||||
|
||||
const startTime = Date.now();
|
||||
const animate = () => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// Easing function for smooth animation
|
||||
const easeOutExpo = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
|
||||
const newValue = Math.floor(targetValue * easeOutExpo);
|
||||
|
||||
setCurrentValue(newValue);
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}, [isVisible, targetValue, duration]);
|
||||
|
||||
return (
|
||||
<span>
|
||||
{currentValue.toLocaleString()}{suffix}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// Intersection Observer hook for triggering animations
|
||||
function useIntersectionObserver(options = {}) {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.3, ...options }
|
||||
);
|
||||
|
||||
if (elementRef.current) {
|
||||
observer.observe(elementRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return [elementRef, isVisible] as const;
|
||||
}
|
||||
|
||||
export function OurImpact() {
|
||||
const [statsRef, statsVisible] = useIntersectionObserver();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Our Impact - About Us | KLC';
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
{/* Hero Section - Services Page Style */}
|
||||
<section className="relative min-h-[90vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1460472178825-e5240623afd5?w=1920&h=1080&fit=crop"
|
||||
alt="Measuring leadership impact and organizational 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">Knowledge Leadership Centre</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Our Impact
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
Real numbers. Real transformation. Discover the measurable difference we've made
|
||||
across industries and organizations worldwide through our leadership development expertise.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="View Success Stories"
|
||||
onClick={() => document.getElementById('testimonials')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="management-dev-primary-cta"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => navigateTo('/contact')}
|
||||
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)'
|
||||
}}
|
||||
>
|
||||
<ArrowRight className="w-5 h-5 mr-2" />
|
||||
Get Started
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="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">
|
||||
<AnimatedCounter
|
||||
targetValue={26643}
|
||||
isVisible={statsVisible}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-small-white opacity-90">Participants Developed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">
|
||||
<AnimatedCounter
|
||||
targetValue={1220}
|
||||
isVisible={statsVisible}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-small-white opacity-90">Programs Delivered</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">
|
||||
<AnimatedCounter
|
||||
targetValue={152}
|
||||
isVisible={statsVisible}
|
||||
/>
|
||||
+
|
||||
</div>
|
||||
<div className="text-small-white opacity-90">Organizations Transformed</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">96%</div>
|
||||
<div className="text-small-white opacity-90">Client Satisfaction</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Partners Section - Redesigned According to JSON Config */}
|
||||
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="container mx-auto section-margin-x">
|
||||
|
||||
|
||||
{/* Statistics Section - Landing Page Style */}
|
||||
<div className="mb-20">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center max-w-7xl mx-auto">
|
||||
|
||||
{/* Left Column - Descriptive Content */}
|
||||
<div>
|
||||
<h2 className="text-h2 mb-6 text-black">
|
||||
Trusted by Industry Leaders
|
||||
</h2>
|
||||
|
||||
|
||||
|
||||
{/* Industries We Serve */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-h3 mb-6">Industries We Serve</h3>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{[
|
||||
"Financial Services", "Investment Banking", "Asset Management", "Technology",
|
||||
"Healthcare", "Manufacturing", "Real Estate", "Consulting"
|
||||
].map((sector) => (
|
||||
<span
|
||||
key={sector}
|
||||
className="px-6 py-3 text-body text-gray-700 border border-primary rounded-full transition-all duration-300 hover:bg-primary hover:text-white hover:shadow-lg hover:scale-105 cursor-default group"
|
||||
style={{
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderColor: 'var(--color-primary)',
|
||||
}}
|
||||
>
|
||||
<span className="group-hover:animate-pulse">{sector}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Statistics with Yellow Bullets */}
|
||||
<div className="space-y-8">
|
||||
{[
|
||||
{ value: "27,000+", label: "Leaders Developed" },
|
||||
{ value: "150+", label: "Corporate Clients" },
|
||||
{ value: "20+", label: "Countries Served" }
|
||||
].map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className={`flex items-center gap-6 ${i < 2 ? 'border-b border-gray-200 pb-8' : ''}`}
|
||||
style={{ animation: `fade-in-up 0.6s ease-out ${i * 0.1}s both` }}
|
||||
>
|
||||
{/* Yellow Bullet Point */}
|
||||
<div
|
||||
className="w-3 h-3 rounded-full flex-shrink-0"
|
||||
style={{ backgroundColor: 'var(--color-accent)' }}
|
||||
></div>
|
||||
|
||||
{/* Stats Content */}
|
||||
<div>
|
||||
<div className="stats-number text-primary mb-1">{stat.value}</div>
|
||||
<p className="text-body font-semibold text-black uppercase tracking-wide">
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Client Logos Grid */}
|
||||
<div className="mb-20">
|
||||
<h3 className="text-h3 text-center mb-12">Our Valued Partners</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
|
||||
{clientLogos.slice(0, 16).map((client, index) => {
|
||||
// Calculate appropriate width based on original logo dimensions
|
||||
const scaledWidth = client.width > 200 ? Math.round(client.width * 0.7) : client.width * 1.1;
|
||||
const displayWidth = Math.max(120, Math.min(scaledWidth, 200));
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${client.name}-${index}`}
|
||||
className="group p-6 flex items-center justify-center h-24 transition-all duration-300 cursor-pointer border border-gray-100 rounded-xl hover:border-primary/30 hover:shadow-lg hover:-translate-y-1"
|
||||
>
|
||||
<img
|
||||
src={client.logo}
|
||||
alt={client.name}
|
||||
style={{
|
||||
width: `${displayWidth}px`,
|
||||
height: 'auto',
|
||||
maxHeight: '50px',
|
||||
objectFit: 'contain',
|
||||
filter: 'grayscale(100%) opacity(0.7)',
|
||||
transition: 'all 0.3s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.filter = 'grayscale(0%) opacity(1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.filter = 'grayscale(100%) opacity(0.7)';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Partnership CTA Section - Two Column Layout */}
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<Card className="border-0 rounded-2xl overflow-hidden card-shadow-dramatic" style={{ backgroundColor: 'rgb(249, 250, 251)' }}>
|
||||
<CardContent className="p-0">
|
||||
<div className="grid lg:grid-cols-2 gap-0 items-center min-h-[400px]">
|
||||
|
||||
{/* Left Column - Partnership Graphic */}
|
||||
<div className="relative h-full min-h-[400px] overflow-hidden">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1739285452621-59d92842fcc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGhhbmRzaGFrZSUyMHBhcnRuZXJzaGlwJTIwcHJvZmVzc2lvbmFsJTIwbWVldGluZ3xlbnwxfHx8fDE3NTU1OTg0NTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
|
||||
alt="Partnership collaboration"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-primary/80 to-primary/40"></div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - CTA Content */}
|
||||
<div className="p-12 flex flex-col justify-center bg-gray-50">
|
||||
|
||||
{/* Branded Tag */}
|
||||
<div className="mb-6">
|
||||
<div className="branded-tag-system">
|
||||
<div className="dot"></div>
|
||||
<span className="text">Partner With Us</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Heading */}
|
||||
<h3 className="text-h2 mb-6 text-black">
|
||||
Ready to Transform Your Leadership?
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-body-lg text-muted mb-8 leading-relaxed">
|
||||
Join our network of successful organizations and unlock your team's full potential.
|
||||
<span className="text-primary font-semibold"> Get in touch</span> to start your development journey today.
|
||||
</p>
|
||||
|
||||
{/* Sticky CTA Button */}
|
||||
<div className="sticky top-8">
|
||||
<button
|
||||
onClick={() => navigateTo('/contact')}
|
||||
className="w-full px-8 py-4 rounded-lg font-semibold transition-all duration-300 hover:shadow-xl mb-4 group"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '600',
|
||||
border: 'none'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#030359';
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 12px 24px rgba(4, 4, 91, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'var(--color-primary)';
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
Schedule a Partnership Discussion
|
||||
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* Supporting Information */}
|
||||
<div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 border border-primary/20">
|
||||
<p className="text-small text-muted text-center leading-relaxed">
|
||||
Connect with our partnership specialists to explore collaboration opportunities
|
||||
and discuss your organization's specific leadership development needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Success Stories Section - Branded Testimonials */}
|
||||
<div id="testimonials">
|
||||
<TestimonialsSection
|
||||
customTestimonials={testimonialHighlights.map(testimonial => ({
|
||||
name: testimonial.author,
|
||||
role: testimonial.position,
|
||||
company: testimonial.program,
|
||||
avatar: testimonial.image,
|
||||
quote: testimonial.quote,
|
||||
rating: testimonial.rating,
|
||||
isVideo: false
|
||||
}))}
|
||||
title="What Our Clients Say"
|
||||
subtitle="Don't just take our word for it. Here's what leaders from our partner organizations have to say about their transformational experiences with KLC."
|
||||
tagText="Client Success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Additional Metrics Section - Redesigned */}
|
||||
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="container mx-auto section-margin-x">
|
||||
<div className="text-center mb-16">
|
||||
<Badge
|
||||
className="mb-6 text-body px-4 py-2"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: 'var(--color-primary)',
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
Transformation Metrics
|
||||
</Badge>
|
||||
<h2 className="text-h2 mb-6">
|
||||
Measuring Real Transformation
|
||||
</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
|
||||
Our impact extends far beyond statistics. We measure success through the
|
||||
lasting transformation we create in leadership capabilities, organizational
|
||||
culture, and sustainable business outcomes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{[
|
||||
{
|
||||
icon: TrendingUp,
|
||||
metric: "85%",
|
||||
label: "Leadership Effectiveness",
|
||||
description: "Average improvement in leadership effectiveness scores within 6 months",
|
||||
details: ["Decision-making quality", "Team engagement", "Strategic thinking", "Change management"]
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
metric: "92%",
|
||||
label: "Client Satisfaction",
|
||||
description: "Client satisfaction and program completion rate across all services",
|
||||
details: ["Program quality", "Facilitator expertise", "Content relevance", "Measurable outcomes"]
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
metric: "15+",
|
||||
label: "Global Reach",
|
||||
description: "Countries where our alumni now lead organizations and drive change",
|
||||
details: ["Global network", "Cultural diversity", "Best practices", "Knowledge transfer"]
|
||||
}
|
||||
].map((stat, index) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
className="border-0 shadow-sm hover:shadow-lg transition-all duration-300 group h-full"
|
||||
style={{ backgroundColor: '#FFFFFF' }}
|
||||
>
|
||||
<CardContent className="p-8">
|
||||
{/* Icon and Metric */}
|
||||
<div className="text-center mb-6">
|
||||
<div
|
||||
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300"
|
||||
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
|
||||
>
|
||||
<Icon className="w-10 h-10 text-primary" />
|
||||
</div>
|
||||
<div className="text-4xl font-bold text-primary mb-2">
|
||||
{stat.metric}
|
||||
</div>
|
||||
<h3 className="text-h4 text-black font-semibold">
|
||||
{stat.label}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-body text-muted leading-relaxed mb-6 text-center">
|
||||
{stat.description}
|
||||
</p>
|
||||
|
||||
{/* Details */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-subhead text-black font-medium">Key Areas:</h4>
|
||||
{stat.details.map((detail, detailIndex) => (
|
||||
<div key={detailIndex} className="flex items-center gap-3">
|
||||
<CheckCircle className="w-4 h-4 text-primary flex-shrink-0" />
|
||||
<span className="text-small text-muted">{detail}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - Branded Banner Style */}
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1200&fit=crop"
|
||||
alt="Professional team collaborating in modern office"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Subtle dark overlay for overall image */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
{/* Gradient overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
||||
</div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)'
|
||||
}}
|
||||
>
|
||||
{/* Branded Tag */}
|
||||
<div className="mb-6">
|
||||
<div className="branded-tag-system-white">
|
||||
<div className="dot"></div>
|
||||
<span className="text">
|
||||
Next Steps
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="text-h2-white leading-tight mb-8">
|
||||
Ready to Create Your Own Success Story?
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-accent)' }}
|
||||
>
|
||||
{" "}Join the leaders{" "}
|
||||
</span>
|
||||
transforming their organizations.
|
||||
</h2>
|
||||
|
||||
{/* CTA Button */}
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Services"
|
||||
onClick={() => navigateTo('/services/leadership-development')}
|
||||
ariaLabel="Explore our leadership development services"
|
||||
className="cta-banner-yellow"
|
||||
/>
|
||||
|
||||
{/* Supporting Text */}
|
||||
<p className="text-body-white mt-6 opacity-90">
|
||||
Connect with our leadership experts to discover how KLC's proven methodologies
|
||||
can transform your organization's performance and culture.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
997
src/components/about/OurVision.tsx
Normal file
997
src/components/about/OurVision.tsx
Normal file
@@ -0,0 +1,997 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { navigateTo } from '../Router';
|
||||
import { PrimaryCTAButton } from '../PrimaryCTAButton';
|
||||
import { Button } from '../ui/button';
|
||||
import { Card, CardContent } from '../ui/card';
|
||||
import { Badge } from '../ui/badge';
|
||||
import { ImageWithFallback } from '../figma/ImageWithFallback';
|
||||
import { BrandedTag } from './BrandedTag';
|
||||
import {
|
||||
Eye,
|
||||
Target,
|
||||
Users,
|
||||
Brain,
|
||||
TrendingUp,
|
||||
Lightbulb,
|
||||
ArrowRight,
|
||||
CheckCircle,
|
||||
Globe,
|
||||
BarChart3,
|
||||
Layers,
|
||||
Compass
|
||||
} from 'lucide-react';
|
||||
|
||||
// Vision pillars data
|
||||
const visionPillars = [
|
||||
{
|
||||
title: "World-Class Institution in Leadership",
|
||||
description: "Establishing ourselves as a premier global institution recognized for excellence in leadership thought and practice, setting industry standards for development methodologies.",
|
||||
icon: Globe,
|
||||
gradient: "from-blue-600 to-blue-700",
|
||||
mainStat: {
|
||||
label: "Global Recognition",
|
||||
value: "+96%",
|
||||
color: "text-primary"
|
||||
},
|
||||
chartData: [
|
||||
{ label: "2020", value: 20 },
|
||||
{ label: "2021", value: 45 },
|
||||
{ label: "2022", value: 70 },
|
||||
{ label: "2023", value: 85 },
|
||||
{ label: "2024", value: 96 }
|
||||
],
|
||||
metrics: [
|
||||
{ label: "Excellence", value: "94%", color: "text-primary" },
|
||||
{ label: "Recognition", value: "91%", color: "text-primary" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Partnership-Driven Capacity Building",
|
||||
description: "Collaborating with institutions to build sustainable leadership capacity and capability that drives organizational transformation and long-term success.",
|
||||
icon: Users,
|
||||
gradient: "from-yellow-500 to-yellow-600",
|
||||
mainStat: {
|
||||
label: "Partnership Growth",
|
||||
value: "+78%",
|
||||
color: "text-primary"
|
||||
},
|
||||
progressMetrics: [
|
||||
{ label: "Partner Satisfaction", value: 82, color: "#F8C301" },
|
||||
{ label: "Capacity Building", value: 76, color: "#04045B" },
|
||||
{ label: "Retention Rate", value: 84, color: "#F8C301" }
|
||||
],
|
||||
metrics: []
|
||||
},
|
||||
{
|
||||
title: "Individual Leadership Discovery",
|
||||
description: "Facilitating individuals to discover and develop their personal leadership resources, unlocking their unique potential to create meaningful impact.",
|
||||
icon: Compass,
|
||||
gradient: "from-purple-600 to-indigo-600",
|
||||
mainStat: {
|
||||
label: "Development Speed",
|
||||
value: "65%",
|
||||
color: "text-primary"
|
||||
},
|
||||
topMetrics: [
|
||||
{ label: "Speed", value: "65%", color: "text-primary" },
|
||||
{ label: "Alignment", value: "89%", color: "text-primary" }
|
||||
],
|
||||
bottomMetrics: [
|
||||
{ label: "Quality", value: "91%", color: "text-primary" },
|
||||
{ label: "Time Reduction", value: "-65%", color: "text-primary" },
|
||||
{ label: "Impact", value: "89%", color: "text-primary" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Approach timeline data
|
||||
const approachSteps = [
|
||||
{
|
||||
title: "Client Context Alignment",
|
||||
description: "Deep understanding of unique organizational challenges, culture, and strategic objectives through comprehensive assessment and stakeholder engagement.",
|
||||
details: [
|
||||
"Organizational diagnostic and culture assessment",
|
||||
"Leadership capability gap analysis",
|
||||
"Strategic business alignment review",
|
||||
"Stakeholder needs analysis"
|
||||
],
|
||||
icon: Target
|
||||
},
|
||||
{
|
||||
title: "Research Anchored Methodology",
|
||||
description: "Evidence-based methodologies and frameworks grounded in behavioral science, leadership psychology, and proven best practices from global research.",
|
||||
details: [
|
||||
"Latest research in leadership effectiveness",
|
||||
"Behavioral science applications",
|
||||
"Validated assessment tools and frameworks",
|
||||
"Global best practice integration"
|
||||
],
|
||||
icon: Brain
|
||||
},
|
||||
{
|
||||
title: "Co-Created Program Design",
|
||||
description: "Collaborative program development with clients, ensuring solutions are tailored, practical, and aligned with specific organizational needs and constraints.",
|
||||
details: [
|
||||
"Joint design workshops with key stakeholders",
|
||||
"Customized learning journeys and pathways",
|
||||
"Practical application focus",
|
||||
"Measurable outcome definition"
|
||||
],
|
||||
icon: Lightbulb
|
||||
}
|
||||
];
|
||||
|
||||
// Leadership orientations preview
|
||||
const leadershipOrientations = [
|
||||
{
|
||||
orientation: "Thinking",
|
||||
description: "How leaders process information, make decisions, and approach complex challenges",
|
||||
aspects: ["Strategic thinking", "Systems thinking", "Critical analysis", "Creative problem-solving"]
|
||||
},
|
||||
{
|
||||
orientation: "Risk Appetite",
|
||||
description: "Leaders' comfort with uncertainty, innovation, and calculated risk-taking",
|
||||
aspects: ["Innovation tolerance", "Change agility", "Calculated risk-taking", "Uncertainty navigation"]
|
||||
},
|
||||
{
|
||||
orientation: "Power",
|
||||
description: "How leaders use influence, authority, and positional power to drive results",
|
||||
aspects: ["Influence strategies", "Authority dynamics", "Empowerment approaches", "Decision rights"]
|
||||
},
|
||||
{
|
||||
orientation: "Interpersonal/Political",
|
||||
description: "Leaders' ability to navigate relationships, coalitions, and organizational dynamics",
|
||||
aspects: ["Relationship building", "Coalition management", "Stakeholder engagement", "Political savvy"]
|
||||
}
|
||||
];
|
||||
|
||||
export function OurVision() {
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Our Vision - About Us | KLC';
|
||||
window.scrollTo(0, 0);
|
||||
}, []);
|
||||
|
||||
// Auto-advance timeline steps
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveStep((prev) => (prev + 1) % approachSteps.length);
|
||||
}, 4000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
{/* Hero Section - Our Impact Page Style */}
|
||||
<section className="relative min-h-[90vh] flex flex-col">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop"
|
||||
alt="Leadership vision and transformation - Our Vision"
|
||||
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">Knowledge Leadership Centre</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-h1-white mb-6">
|
||||
Our Vision
|
||||
</h1>
|
||||
|
||||
<p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
|
||||
Building the next generation of transformational leaders who drive organizational
|
||||
success and create lasting positive impact worldwide through excellence in leadership development.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Approach"
|
||||
onClick={() => document.getElementById('vision-pillars')?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className="management-dev-primary-cta"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => navigateTo('/contact')}
|
||||
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)'
|
||||
}}
|
||||
>
|
||||
<ArrowRight className="w-5 h-5 mr-2" />
|
||||
Get Started
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="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>
|
||||
<div className="text-small-white opacity-90">Vision Pillars</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">96%</div>
|
||||
<div className="text-small-white opacity-90">Client Success Rate</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">25+</div>
|
||||
<div className="text-small-white opacity-90">Years Experience</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-h2-white mb-2">Global</div>
|
||||
<div className="text-small-white opacity-90">Impact Reach</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Vision Pillars - Redesigned */}
|
||||
<section id="vision-pillars" className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="container mx-auto section-margin-x">
|
||||
<div className="text-center mb-16">
|
||||
<Badge
|
||||
className="mb-6 text-body px-4 py-2"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: 'var(--color-primary)',
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
Foundation
|
||||
</Badge>
|
||||
<h2 className="text-h2 mb-6">Three Pillars of Our Vision</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
|
||||
Our comprehensive approach to leadership development is built on three foundational pillars
|
||||
that guide everything we do and drive measurable transformation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-12 max-w-7xl mx-auto">
|
||||
{visionPillars.map((pillar, index) => (
|
||||
<div key={pillar.title} className="group">
|
||||
<Card
|
||||
className="border-0 shadow-sm hover:shadow-xl transition-all duration-300 h-full bg-white p-0"
|
||||
>
|
||||
<CardContent className="p-8">
|
||||
{/* Icon */}
|
||||
<div
|
||||
className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
|
||||
style={{ backgroundColor: 'rgba(4, 4, 91, 0.08)' }}
|
||||
>
|
||||
{React.createElement(pillar.icon, {
|
||||
className: "w-8 h-8 text-primary"
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-h4 mb-4 text-black leading-tight">
|
||||
{pillar.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-body text-muted leading-relaxed mb-6">
|
||||
{pillar.description}
|
||||
</p>
|
||||
|
||||
{/* Main Stat */}
|
||||
<div className="mb-6">
|
||||
<div className="text-small text-muted mb-1">{pillar.mainStat.label}</div>
|
||||
<div className={`text-3xl font-bold ${pillar.mainStat.color}`}>
|
||||
{pillar.mainStat.value}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Visualization Section */}
|
||||
{/* First Pillar: Bar Chart */}
|
||||
{index === 0 && (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<div className="flex items-end justify-between gap-1 h-20 mb-2">
|
||||
{pillar.chartData.map((item, barIndex) => (
|
||||
<div key={item.label} className="flex flex-col items-center flex-1">
|
||||
<div
|
||||
className="w-full rounded-t-sm transition-all duration-1000 delay-300"
|
||||
style={{
|
||||
height: `${item.value}%`,
|
||||
backgroundColor: barIndex >= 3 ? '#04045B' : '#E5E7EB',
|
||||
minHeight: '8px'
|
||||
}}
|
||||
></div>
|
||||
<div className="text-xs text-muted mt-1">{item.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{pillar.metrics.map((metric, metricIndex) => (
|
||||
<div key={metric.label} className="text-center">
|
||||
<div className={`text-2xl font-bold ${metric.color}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-small text-muted">
|
||||
{metric.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Second Pillar: Progress Bars */}
|
||||
{index === 1 && (
|
||||
<div className="space-y-4">
|
||||
{pillar.progressMetrics.map((metric, metricIndex) => (
|
||||
<div key={metric.label}>
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-small text-muted">{metric.label}</span>
|
||||
<span className="text-small font-medium text-black">{metric.value}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2">
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-1000"
|
||||
style={{
|
||||
width: `${metric.value}%`,
|
||||
backgroundColor: metric.color,
|
||||
animationDelay: `${(metricIndex + 1) * 200}ms`
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Third Pillar: Multiple Metrics Grid */}
|
||||
{index === 2 && (
|
||||
<>
|
||||
{/* Top Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
{pillar.topMetrics.map((metric, metricIndex) => (
|
||||
<div key={metric.label} className="text-center">
|
||||
<div className="text-small text-muted mb-1">{metric.label}</div>
|
||||
<div className={`text-2xl font-bold ${metric.color}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Metrics */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{pillar.bottomMetrics.map((metric, metricIndex) => (
|
||||
<div key={metric.label} className="text-center">
|
||||
<div className={`text-lg font-bold ${metric.color}`}>
|
||||
{metric.value}
|
||||
</div>
|
||||
<div className="text-xs text-muted">
|
||||
{metric.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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="text-center mb-16">
|
||||
<Badge
|
||||
className="mb-6 text-body px-4 py-2"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: 'var(--color-primary)',
|
||||
border: 'none'
|
||||
}}
|
||||
>
|
||||
Methodology
|
||||
</Badge>
|
||||
<h2 className="text-h2 mb-6">Our Strategic Approach</h2>
|
||||
<p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
|
||||
A clear step-by-step process that drives measurable impact and lasting transformation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-12 max-w-6xl mx-auto">
|
||||
{/* Timeline Steps - Left Side */}
|
||||
<div className="flex lg:flex-col gap-6 lg:w-1/3">
|
||||
{/* Progress Indicator */}
|
||||
<div className="hidden lg:block text-center mb-6">
|
||||
<div className="text-small text-muted font-medium">
|
||||
Step {activeStep + 1} of {approachSteps.length}
|
||||
</div>
|
||||
<div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-500 ease-out"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
width: `${((activeStep + 1) / approachSteps.length) * 100}%`
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step Buttons */}
|
||||
{approachSteps.map((step, index) => (
|
||||
<button
|
||||
key={step.title}
|
||||
onClick={() => setActiveStep(index)}
|
||||
className={`group flex items-center gap-4 px-6 py-4 rounded-xl border-2 transition-all duration-300 text-left w-full
|
||||
${activeStep === index
|
||||
? 'bg-primary text-white border-primary shadow-lg'
|
||||
: 'bg-white text-black hover:shadow-md hover:scale-105'
|
||||
}
|
||||
`}
|
||||
style={{
|
||||
borderColor: activeStep === index ? 'var(--color-primary)' : 'rgba(4, 4, 91, 0.2)',
|
||||
backgroundColor: activeStep === index ? 'var(--color-primary)' : '#FFFFFF'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (activeStep !== index) {
|
||||
e.currentTarget.style.borderColor = 'var(--color-primary)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (activeStep !== index) {
|
||||
e.currentTarget.style.borderColor = 'rgba(4, 4, 91, 0.2)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Step Number */}
|
||||
<div
|
||||
className={`w-10 h-10 flex items-center justify-center rounded-full font-bold text-lg transition-all duration-300
|
||||
${activeStep === index
|
||||
? 'bg-white text-primary'
|
||||
: 'bg-primary text-white group-hover:scale-110'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{index + 1}
|
||||
</div>
|
||||
|
||||
{/* Step Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div
|
||||
className={`font-medium text-body leading-tight transition-colors duration-300
|
||||
${activeStep === index ? 'text-white' : 'text-black'}
|
||||
`}
|
||||
>
|
||||
{step.title}
|
||||
</div>
|
||||
|
||||
{/* Step Icon */}
|
||||
<div className="mt-2">
|
||||
{React.createElement(step.icon, {
|
||||
className: `w-5 h-5 transition-all duration-300 ${
|
||||
activeStep === index ? 'text-white' : 'text-primary'
|
||||
}`
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Active Step Content - Right Side */}
|
||||
<div className="flex-1 lg:w-2/3">
|
||||
<Card
|
||||
className="border-0 shadow-xl transition-all duration-500 ease-out bg-white"
|
||||
style={{ minHeight: '500px' }}
|
||||
>
|
||||
<CardContent className="p-8 lg:p-10">
|
||||
{/* Mobile Progress Indicator */}
|
||||
<div className="lg:hidden text-center mb-6">
|
||||
<div className="text-small text-muted font-medium">
|
||||
Step {activeStep + 1} of {approachSteps.length}
|
||||
</div>
|
||||
<div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
|
||||
<div
|
||||
className="h-2 rounded-full transition-all duration-500 ease-out"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
width: `${((activeStep + 1) / approachSteps.length) * 100}%`
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step Content */}
|
||||
<div className="mb-8 fade-in animate-in duration-700">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div
|
||||
className="w-16 h-16 rounded-xl flex items-center justify-center transition-transform duration-300 hover:scale-110"
|
||||
style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
|
||||
>
|
||||
{React.createElement(approachSteps[activeStep].icon, {
|
||||
className: "w-8 h-8 text-primary"
|
||||
})}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-h3 text-black leading-tight">
|
||||
{approachSteps[activeStep].title}
|
||||
</h3>
|
||||
<div className="text-small text-primary font-medium mt-1">
|
||||
Step {activeStep + 1} of {approachSteps.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-body-lg text-muted leading-relaxed mb-8">
|
||||
{approachSteps[activeStep].description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Key Components Accordion-Style */}
|
||||
<div className="mb-8">
|
||||
<h4 className="text-h4 text-black mb-6">Key Components</h4>
|
||||
<div className="space-y-3">
|
||||
{approachSteps[activeStep].details.map((detail, index) => (
|
||||
<div key={index} className="group">
|
||||
<div
|
||||
className="flex items-start gap-3 p-4 rounded-lg transition-all duration-300 cursor-pointer hover:scale-102"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.05)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.08)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.05)';
|
||||
}}
|
||||
>
|
||||
<div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:scale-110 transition-transform duration-300">
|
||||
<CheckCircle className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<span className="text-body text-black leading-relaxed">{detail}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button - Always Visible */}
|
||||
<div className="pt-6" style={{ borderTop: '1px solid rgba(4, 4, 91, 0.1)' }}>
|
||||
<PrimaryCTAButton
|
||||
text="Learn More About Our Approach"
|
||||
onClick={() => navigateTo('/services/consulting')}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Leadership Framework CTA - Redesigned */}
|
||||
<section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
|
||||
<div className="container 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 */}
|
||||
<div>
|
||||
{/* Modern Pill Badge */}
|
||||
<div className="inline-flex items-center gap-3 px-6 py-3 rounded-full mb-8 shadow-sm transition-all duration-300 hover:shadow-md"
|
||||
style={{
|
||||
backgroundColor: 'rgba(248, 195, 1, 0.12)',
|
||||
border: '1px solid rgba(248, 195, 1, 0.2)'
|
||||
}}>
|
||||
<div className="w-3 h-3 rounded-full animate-pulse"
|
||||
style={{ backgroundColor: 'var(--color-accent)' }} />
|
||||
<span className="text-small font-semibold text-black uppercase tracking-wide">
|
||||
Proprietary Framework
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-h2 mb-8 text-black leading-tight">
|
||||
Leadership Orientations Framework
|
||||
</h3>
|
||||
|
||||
<p className="text-body-lg text-muted mb-10 leading-relaxed">
|
||||
Our research-backed framework examines four critical dimensions that define
|
||||
leadership effectiveness and drive organizational results. This proprietary
|
||||
methodology helps leaders understand their natural orientations and develop
|
||||
adaptive capabilities.
|
||||
</p>
|
||||
|
||||
{/* Enhanced Framework Items */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-12">
|
||||
{[
|
||||
{
|
||||
label: 'Thinking',
|
||||
desc: 'Strategic & analytical approaches',
|
||||
icon: Brain,
|
||||
color: '#FFFFFF',
|
||||
accentColor: 'var(--color-primary)'
|
||||
},
|
||||
{
|
||||
label: 'Risk Appetite',
|
||||
desc: 'Innovation & change tolerance',
|
||||
icon: TrendingUp,
|
||||
color: '#FFFFFF',
|
||||
accentColor: 'var(--color-primary)'
|
||||
},
|
||||
{
|
||||
label: 'Power',
|
||||
desc: 'Influence & authority usage',
|
||||
icon: Target,
|
||||
color: '#FFFFFF',
|
||||
accentColor: 'var(--color-primary)'
|
||||
},
|
||||
{
|
||||
label: 'Interpersonal',
|
||||
desc: 'Relationship & political navigation',
|
||||
icon: Users,
|
||||
color: '#FFFFFF',
|
||||
accentColor: 'var(--color-primary)'
|
||||
}
|
||||
].map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Card
|
||||
key={item.label}
|
||||
className="border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group overflow-hidden"
|
||||
style={{ backgroundColor: item.color }}
|
||||
>
|
||||
<CardContent className="p-6 relative">
|
||||
{/* Subtle background pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-5 transition-opacity duration-300 group-hover:opacity-10"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(4,4,91,0.1) 0%, transparent 50%)'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div
|
||||
className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
|
||||
style={{
|
||||
backgroundColor: item.accentColor,
|
||||
boxShadow: '0 4px 12px rgba(4,4,91,0.25)'
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
className="w-6 h-6 text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h4 className="text-subhead text-black mb-2 font-semibold group-hover:text-primary transition-colors">
|
||||
{item.label}
|
||||
</h4>
|
||||
<p className="text-small text-muted leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced progress indicator */}
|
||||
<div className="mt-4">
|
||||
<div className="h-1.5 bg-gray-100 rounded-full overflow-hidden shadow-inner">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 group-hover:w-full"
|
||||
style={{
|
||||
width: '60%',
|
||||
backgroundColor: item.accentColor,
|
||||
boxShadow: '0 0 8px rgba(4,4,91,0.3)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating accent */}
|
||||
<div
|
||||
className="absolute top-4 right-4 w-2 h-2 rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-300"
|
||||
style={{ backgroundColor: item.accentColor }}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Framework"
|
||||
onClick={() => navigateTo('/about/our-expertise')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Visual Side */}
|
||||
<div className="relative">
|
||||
<Card
|
||||
className="border border-gray-200 shadow-2xl overflow-hidden"
|
||||
style={{
|
||||
background: '#FFFFFF'
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-10 relative">
|
||||
{/* Sophisticated Background Pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-5"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
radial-gradient(circle at 25% 25%, rgba(4,4,91,0.3) 0%, transparent 40%),
|
||||
radial-gradient(circle at 75% 75%, rgba(4,4,91,0.1) 0%, transparent 40%),
|
||||
linear-gradient(45deg, rgba(4,4,91,0.05) 0%, transparent 30%, rgba(4,4,91,0.05) 70%, transparent 100%)
|
||||
`
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Geometric accent elements */}
|
||||
<div className="absolute top-8 right-8 w-16 h-16 border border-blue-300 opacity-30 rounded-lg rotate-12" />
|
||||
<div className="absolute bottom-8 left-8 w-12 h-12 bg-blue-300 opacity-15 rounded-full" />
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-10">
|
||||
<div
|
||||
className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 relative overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)',
|
||||
border: '1px solid rgba(4, 4, 91, 0.3)'
|
||||
}}
|
||||
>
|
||||
{/* Inner glow */}
|
||||
<div className="absolute inset-2 rounded-xl bg-gradient-to-br from-white/20 to-transparent" />
|
||||
<BarChart3 className="w-10 h-10 text-white relative z-10" />
|
||||
</div>
|
||||
<h4 className="text-h4 text-black mb-3 font-semibold">Framework Impact</h4>
|
||||
<p className="text-body text-muted">
|
||||
Proven results across organizations
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Infographic Stats */}
|
||||
<div className="space-y-8">
|
||||
{/* Leadership Effectiveness */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
{/* Circular progress ring */}
|
||||
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="rgba(4, 4, 91, 0.2)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
strokeDasharray={`${2 * Math.PI * 30}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 89 / 100)}`}
|
||||
className="transition-all duration-2000 ease-out"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-blue-600">89%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-body-lg text-black font-semibold mb-2">Leadership Effectiveness</div>
|
||||
<div className="text-small text-muted mb-3">Improvement in 6 months</div>
|
||||
{/* Horizontal progress bar */}
|
||||
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-2000 ease-out"
|
||||
style={{
|
||||
width: '89%',
|
||||
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Self-Awareness Growth */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
{/* Circular progress ring */}
|
||||
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="rgba(4, 4, 91, 0.2)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
strokeDasharray={`${2 * Math.PI * 30}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 92 / 100)}`}
|
||||
className="transition-all duration-2000 ease-out"
|
||||
strokeLinecap="round"
|
||||
style={{ transitionDelay: '0.5s' }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-blue-600">92%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-body-lg text-black font-semibold mb-2">Self-Awareness Growth</div>
|
||||
<div className="text-small text-muted mb-3">Better decision making</div>
|
||||
{/* Horizontal progress bar */}
|
||||
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-2000 ease-out"
|
||||
style={{
|
||||
width: '92%',
|
||||
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
|
||||
transitionDelay: '0.5s'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Performance */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
{/* Circular progress ring */}
|
||||
<svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="rgba(4, 4, 91, 0.2)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx="40"
|
||||
cy="40"
|
||||
r="30"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth="4"
|
||||
fill="none"
|
||||
strokeDasharray={`${2 * Math.PI * 30}`}
|
||||
strokeDashoffset={`${2 * Math.PI * 30 * (1 - 76 / 100)}`}
|
||||
className="transition-all duration-2000 ease-out"
|
||||
strokeLinecap="round"
|
||||
style={{ transitionDelay: '1s' }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="text-xl font-bold text-blue-600">76%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-body-lg text-black font-semibold mb-2">Team Performance</div>
|
||||
<div className="text-small text-muted mb-3">Enhanced collaboration</div>
|
||||
{/* Horizontal progress bar */}
|
||||
<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-2000 ease-out"
|
||||
style={{
|
||||
width: '76%',
|
||||
background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
|
||||
transitionDelay: '1s'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom accent with trust indicator */}
|
||||
<div className="flex items-center justify-center mt-10 pt-8 border-t border-gray-200">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-blue-500" />
|
||||
<span className="text-small text-black font-medium">500+ Organizations</span>
|
||||
</div>
|
||||
<div className="w-1 h-1 bg-blue-500 rounded-full" />
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-blue-500" />
|
||||
<span className="text-small text-black font-medium">Proven Results</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* CTA Section - Vision Banner Style */}
|
||||
<section className="relative h-[700px] overflow-hidden">
|
||||
{/* Background Image */}
|
||||
<div className="absolute inset-0">
|
||||
<ImageWithFallback
|
||||
src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=2940&h=1200&fit=crop"
|
||||
alt="Visionary leadership team planning strategy"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Subtle dark overlay for overall image */}
|
||||
<div className="absolute inset-0 bg-black/30" />
|
||||
|
||||
{/* Gradient overlay for better text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
|
||||
</div>
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="relative h-full flex items-center justify-end section-margin-x">
|
||||
{/* CTA Content Block */}
|
||||
<div
|
||||
className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-primary)'
|
||||
}}
|
||||
>
|
||||
{/* Branded Tag */}
|
||||
<div className="mb-6">
|
||||
<div className="branded-tag-system-white">
|
||||
<div className="dot"></div>
|
||||
<span className="text">
|
||||
Transform Your Vision
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Headline */}
|
||||
<h2 className="text-h2-white leading-tight mb-8">
|
||||
Ready to Build Your Leadership Vision?
|
||||
<span
|
||||
className="italic"
|
||||
style={{ color: 'var(--color-accent)' }}
|
||||
>
|
||||
{" "}Start your transformation{" "}
|
||||
</span>
|
||||
journey today.
|
||||
</h2>
|
||||
|
||||
{/* CTA Button */}
|
||||
<PrimaryCTAButton
|
||||
text="Explore Our Services"
|
||||
onClick={() => navigateTo('/services/leadership-development')}
|
||||
ariaLabel="Explore our leadership development services"
|
||||
className="cta-banner-yellow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/components/about/PageHeader.tsx
Normal file
1
src/components/about/PageHeader.tsx
Normal file
@@ -0,0 +1 @@
|
||||
// This file has been removed
|
||||
1
src/components/about/StatCard.tsx
Normal file
1
src/components/about/StatCard.tsx
Normal file
@@ -0,0 +1 @@
|
||||
// This file has been removed
|
||||
1
src/components/about/TeamMemberCard.tsx
Normal file
1
src/components/about/TeamMemberCard.tsx
Normal file
@@ -0,0 +1 @@
|
||||
// This file has been removed
|
||||
Reference in New Issue
Block a user