first commit

src/components/StatsSection.tsx

@@ -0,0 +1,143 @@
+import { Button } from "./ui/button";
+import { useAnimatedCounter } from "./hooks/useAnimatedCounter";
+import { ArrowUpRight } from "lucide-react";
+import { useState, useEffect } from "react";
+import { BrandedTag } from "./about/BrandedTag";
+import { PrimaryCTAButton } from "./PrimaryCTAButton";
+
+interface StatItemProps {
+  end: number;
+  suffix: string;
+  label: string;
+  duration?: number;
+}
+
+function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
+  const { count, ref } = useAnimatedCounter({ end, suffix, duration });
+
+  return (
+    <div className="mb-0">
+      {/* Top line */}
+      <div 
+        className="w-full h-[1px] mb-4"
+        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
+      />
+      
+      {/* Large number */}
+      <div 
+        ref={ref}
+        className="stats-number mb-3 leading-none"
+        style={{ 
+          color: 'var(--color-brand-primary)',
+          fontFamily: 'var(--font-family-base)'
+        }}
+      >
+        {count}
+      </div>
+      
+      {/* Yellow square and label */}
+      <div className="flex items-center mb-4">
+        <div 
+          className="w-2 h-2 mr-3 flex-shrink-0"
+          style={{ backgroundColor: 'var(--color-brand-accent)' }}
+        />
+        <span 
+          className="text-eyebrow"
+          style={{ color: 'var(--color-brand-black)' }}
+        >
+          {label}
+        </span>
+      </div>
+      
+      {/* Bottom line */}
+      <div 
+        className="w-full h-[1px]"
+        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
+      />
+    </div>
+  );
+}
+
+export function StatsSection() {
+  return (
+    <section 
+      className="py-20"
+      style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
+    >
+      <div className="section-margin-x">
+        <div className="max-w-7xl mx-auto">
+          <div className="mb-12 lg:mb-16 md:mb-12 sm:mb-8">
+            {/* Branded Tag */}
+            <BrandedTag 
+              text="Serving Leaders Across Industries" 
+            />
+
+            {/* Main Heading */}
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
+              <div className="lg:col-span-6 md:col-span-8 sm:col-span-12">
+                <h2 className="text-h2 mb-8">
+                  Driving impact by building future-ready leaders who thrive in
+                  complexity and lead with confidence.
+                </h2>
+                {/* CTA Button */}
+                <PrimaryCTAButton 
+                  text="About Us"
+                  onClick={() => console.log('About us clicked')}
+                  ariaLabel="Learn more about KLC"
+                />
+              </div>
+
+              {/* Desktop Statistics */}
+              <div className="hidden lg:block lg:col-start-9 lg:col-end-13">
+                <div className="space-y-6">
+                  <StatItem 
+                    end={27000} 
+                    suffix="+" 
+                    label="LEADERS DEVELOPED"
+                    duration={2500}
+                  />
+                  <StatItem 
+                    end={150} 
+                    suffix="+" 
+                    label="CORPORATE CLIENTS"
+                    duration={2000}
+                  />
+                  <StatItem 
+                    end={20} 
+                    suffix="+" 
+                    label="COUNTRIES SERVED"
+                    duration={1800}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Mobile Statistics - Show below content on mobile/tablet */}
+            <div className="block lg:hidden mt-12">
+              <div className="grid grid-cols-2 gap-6 sm:gap-8">
+                <StatItem 
+                  end={27000} 
+                  suffix="+" 
+                  label="LEADERS DEVELOPED"
+                  duration={2500}
+                />
+                <StatItem 
+                  end={150} 
+                  suffix="+" 
+                  label="CORPORATE CLIENTS"
+                  duration={2000}
+                />
+                <StatItem 
+                  end={20} 
+                  suffix="+" 
+                  label="COUNTRIES SERVED"
+                  duration={1800}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}