From f540b267f8068105512868e560fa8664d02a7849 Mon Sep 17 00:00:00 2001
From: priyanshuvish <vishpriyanshu172@gmail.com>
Date: Wed, 1 Oct 2025 15:30:06 +0530
Subject: [PATCH] add testimonial in kautilyafac

---
 src/components/KautilyaFacility.tsx | 267 ++++++++++------------------
 1 file changed, 91 insertions(+), 176 deletions(-)

diff --git a/src/components/KautilyaFacility.tsx b/src/components/KautilyaFacility.tsx
index c97f2df..207425c 100644
--- a/src/components/KautilyaFacility.tsx
+++ b/src/components/KautilyaFacility.tsx
@@ -7,7 +7,7 @@ import { navigateTo } from './Router';
 import { BrandedTag } from './about/BrandedTag';
 import { PrimaryCTAButton } from './PrimaryCTAButton';
 import { StandardCTAButton } from './StandardCTAButton';
-import { 
+import {
   ArrowRight,
   CheckCircle,
   Settings,
@@ -42,6 +42,7 @@ import {
   Coffee,
   Wifi
 } from 'lucide-react';
+import { TestimonialsSection } from './TestimonialsSection';
 
 const targetAudience = [
   {
@@ -152,7 +153,7 @@ export function KautilyaFacility() {
       {/* Hero Section */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
-          <div 
+          <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
               backgroundImage: `url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1920&h=1080&fit=crop')`
@@ -166,8 +167,8 @@ export function KautilyaFacility() {
             <div className="max-w-4xl">
               {/* Back Navigation */}
               <div className="mb-8">
-                <Button 
-                  variant="ghost" 
+                <Button
+                  variant="ghost"
                   onClick={() => navigateTo('/services')}
                   className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                 >
@@ -181,13 +182,13 @@ export function KautilyaFacility() {
                   Kautilya Facility
                 </h1>
               </div>
-              
+
               <p className="text-body-lg-white mb-8 max-w-3xl">
                 <strong>Experience world-class residential learning at our premium campus with 96% client satisfaction and exceptional facilities designed for leadership excellence.</strong>
               </p>
 
               <div className="flex justify-start">
-                <PrimaryCTAButton 
+                <PrimaryCTAButton
                   text="Book a Consultation"
                   onClick={() => navigateTo('/contact?topic=kautilya-facility')}
                   ariaLabel="Book a consultation for Kautilya Facility"
@@ -203,74 +204,74 @@ export function KautilyaFacility() {
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
-              <div className="text-center mb-12">
-                <BrandedTag text="What Is This Service?" />
-                <h2 className="text-h2 mb-8 text-[#26231A]">Premium Learning Campus & Residential Programs</h2>
-                <div className="max-w-4xl mx-auto space-y-6">
-                  <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
-                    Kautilya Facility is a world-class residential learning campus designed specifically for executive education and leadership development programs. Our premium facility combines luxury accommodations, state-of-the-art learning spaces, and comprehensive amenities to create an immersive environment that maximizes learning outcomes and program engagement.
+            <div className="text-center mb-12">
+              <BrandedTag text="What Is This Service?" />
+              <h2 className="text-h2 mb-8 text-[#26231A]">Premium Learning Campus & Residential Programs</h2>
+              <div className="max-w-4xl mx-auto space-y-6">
+                <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
+                  Kautilya Facility is a world-class residential learning campus designed specifically for executive education and leadership development programs. Our premium facility combines luxury accommodations, state-of-the-art learning spaces, and comprehensive amenities to create an immersive environment that maximizes learning outcomes and program engagement.
+                </p>
+                <div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
+                  <p className="text-body-lg text-[#26231A] leading-relaxed">
+                    <span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations struggle to find appropriate venues that combine professional learning environments with quality accommodations for residential programs. Standard hotels lack the specialized learning infrastructure, while conference centers often compromise on accommodation quality. Our facility eliminates these compromises by providing an integrated solution designed specifically for executive learning.
                   </p>
-                  <div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
-                    <p className="text-body-lg text-[#26231A] leading-relaxed">
-                      <span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations struggle to find appropriate venues that combine professional learning environments with quality accommodations for residential programs. Standard hotels lack the specialized learning infrastructure, while conference centers often compromise on accommodation quality. Our facility eliminates these compromises by providing an integrated solution designed specifically for executive learning.
-                    </p>
-                  </div>
-                </div>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
-                  <div className="flex flex-col items-center text-center">
-                    <div 
-                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
-                      style={{ backgroundColor: '#04045B' }}
-                    >
-                      <Building className="w-8 h-8 text-white" />
-                    </div>
-                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
-                      Premium Campus
-                    </h4>
-                    <p className="text-body text-[#6F6F6F] leading-relaxed">
-                      World-class residential learning campus with luxury amenities and sophisticated infrastructure
-                    </p>
-                  </div>
-                </div>
-
-                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
-                  <div className="flex flex-col items-center text-center">
-                    <div 
-                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
-                      style={{ backgroundColor: '#04045B' }}
-                    >
-                      <BookOpen className="w-8 h-8 text-white" />
-                    </div>
-                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
-                      Learning-Focused Design
-                    </h4>
-                    <p className="text-body text-[#6F6F6F] leading-relaxed">
-                      Specialized spaces designed for optimal learning and development with cutting-edge technology
-                    </p>
-                  </div>
-                </div>
-
-                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
-                  <div className="flex flex-col items-center text-center">
-                    <div 
-                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
-                      style={{ backgroundColor: '#04045B' }}
-                    >
-                      <Heart className="w-8 h-8 text-white" />
-                    </div>
-                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
-                      96% Satisfaction Rate
-                    </h4>
-                    <p className="text-body text-[#6F6F6F] leading-relaxed">
-                      Exceptional client satisfaction with facility quality, service excellence, and learning outcomes
-                    </p>
-                  </div>
                 </div>
               </div>
             </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
+                <div className="flex flex-col items-center text-center">
+                  <div
+                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
+                    style={{ backgroundColor: '#04045B' }}
+                  >
+                    <Building className="w-8 h-8 text-white" />
+                  </div>
+                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
+                    Premium Campus
+                  </h4>
+                  <p className="text-body text-[#6F6F6F] leading-relaxed">
+                    World-class residential learning campus with luxury amenities and sophisticated infrastructure
+                  </p>
+                </div>
+              </div>
+
+              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
+                <div className="flex flex-col items-center text-center">
+                  <div
+                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
+                    style={{ backgroundColor: '#04045B' }}
+                  >
+                    <BookOpen className="w-8 h-8 text-white" />
+                  </div>
+                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
+                    Learning-Focused Design
+                  </h4>
+                  <p className="text-body text-[#6F6F6F] leading-relaxed">
+                    Specialized spaces designed for optimal learning and development with cutting-edge technology
+                  </p>
+                </div>
+              </div>
+
+              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
+                <div className="flex flex-col items-center text-center">
+                  <div
+                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
+                    style={{ backgroundColor: '#04045B' }}
+                  >
+                    <Heart className="w-8 h-8 text-white" />
+                  </div>
+                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
+                    96% Satisfaction Rate
+                  </h4>
+                  <p className="text-body text-[#6F6F6F] leading-relaxed">
+                    Exceptional client satisfaction with facility quality, service excellence, and learning outcomes
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
 
@@ -291,7 +292,7 @@ export function KautilyaFacility() {
                 <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
                     <div className="flex items-center gap-4 mb-6">
-                      <div 
+                      <div
                         className="w-16 h-16 rounded-2xl flex items-center justify-center"
                         style={{ backgroundColor: 'var(--color-primary)' }}
                       >
@@ -333,13 +334,13 @@ export function KautilyaFacility() {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
               {useCases.map((useCase, index) => (
-                <div 
+                <div
                   key={index}
                   className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                 >
                   {/* Icon and Title */}
                   <div className="flex items-start gap-4 mb-4">
-                    <div 
+                    <div
                       className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                       style={{ backgroundColor: '#04045B' }}
                     >
@@ -723,7 +724,7 @@ export function KautilyaFacility() {
                     Our integrated campus approach delivers superior learning outcomes through exceptional environments.
                   </p>
                 </div>
-                
+
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                   <div className="text-center bg-white rounded-lg p-6">
                     <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
@@ -732,7 +733,7 @@ export function KautilyaFacility() {
                     <div className="text-h2 text-[#04045B] mb-2">96%</div>
                     <p className="text-body text-[#6F6F6F]">Guest Satisfaction Rating</p>
                   </div>
-                  
+
                   <div className="text-center bg-white rounded-lg p-6">
                     <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
                       <Users className="w-7 h-7 text-white" />
@@ -740,7 +741,7 @@ export function KautilyaFacility() {
                     <div className="text-h2 text-[#04045B] mb-2">92%</div>
                     <p className="text-body text-[#6F6F6F]">Program Effectiveness Increase</p>
                   </div>
-                  
+
                   <div className="text-center bg-white rounded-lg p-6">
                     <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
                       <TrendingUp className="w-7 h-7 text-white" />
@@ -769,7 +770,7 @@ export function KautilyaFacility() {
 
             <div className="space-y-8">
               {facilityFeatures.map((feature, index) => (
-                <Card 
+                <Card
                   key={index}
                   className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                 >
@@ -779,7 +780,7 @@ export function KautilyaFacility() {
                       onClick={() => setExpandedFeature(expandedFeature === index ? null : index)}
                     >
                       <div className="flex items-start gap-4 flex-1">
-                        <div 
+                        <div
                           className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                           style={{ backgroundColor: 'var(--color-primary)' }}
                         >
@@ -855,7 +856,7 @@ export function KautilyaFacility() {
               {expectedOutcomes.map((outcome, index) => (
                 <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                   <CardContent className="p-8">
-                    <div 
+                    <div
                       className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                       style={{ backgroundColor: 'var(--color-primary)' }}
                     >
@@ -896,97 +897,11 @@ export function KautilyaFacility() {
       </section>
 
       {/* 7. Client Examples / Testimonials - Hero Section Design */}
-      <section 
-        className="relative py-20 flex items-center"
-        style={{ backgroundColor: '#F7F7FD' }}
-      >
-        <div className="w-full section-margin-x">
-          {/* Branded Tag */}
-          <div className="flex justify-center mb-12">
-            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
-              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
-              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
-                Client Success Stories
-              </span>
-            </div>
-          </div>
-
-          {/* Main heading */}
-          <h2 
-            className="text-h2 leading-tight mb-12 text-center"
-            style={{ color: 'var(--color-brand-primary)' }}
-          >
-            Kautilya Facility Success
-          </h2>
-
-          {/* Split Layout Container with Max Width */}
-          <div className="max-w-5xl mx-auto">
-            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
-              {/* Left Side - Image */}
-              <div className="flex-1 relative">
-                <div className="relative w-full h-full overflow-hidden">
-                  <ImageWithFallback
-                    src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&h=800&fit=crop"
-                    alt="Kautilya Facility Success"
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-              </div>
-
-              {/* Right Side - Quote Content with White Background */}
-              <div 
-                className="flex-1 flex items-center justify-center p-8 relative"
-                style={{ backgroundColor: 'white' }}
-              >
-                {/* Large Opening Quotation Mark */}
-                <div 
-                  className="absolute top-4 left-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-
-                <div className="space-y-4 max-w-lg relative z-10">
-                  {/* Quote */}
-                  <blockquote 
-                    className="text-lg leading-relaxed font-medium"
-                    style={{ 
-                      fontFamily: 'var(--font-family-base)',
-                      color: 'var(--color-brand-black)'
-                    }}
-                  >
-                    Kautilya Facility exceeded our expectations for our senior leadership retreat. The combination of luxury accommodations, state-of-the-art learning spaces, and exceptional service created the perfect environment for strategic planning. Our team achieved breakthrough results.
-                  </blockquote>
-
-                  {/* Attribution */}
-                  <div className="space-y-1 pt-3">
-                    <div 
-                      className="text-base font-semibold"
-                      style={{ color: 'var(--color-brand-primary)' }}
-                    >
-                      Multinational Corporation
-                    </div>
-                    <div 
-                      className="text-xs"
-                      style={{ color: 'var(--color-brand-gray-muted)' }}
-                    >
-                      Senior Leadership Team • 5-day strategic retreat • 96% satisfaction rating
-                    </div>
-                  </div>
-                </div>
-
-                {/* Large Closing Quotation Mark */}
-                <div 
-                  className="absolute bottom-4 right-4 text-3xl opacity-30"
-                  style={{ color: 'var(--color-brand-primary)' }}
-                >
-                  "
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <TestimonialsSection
+        title="Kautilya Facility Success"
+        subtitle=""
+        tagText="Client Success Stories"
+      />
 
       {/* 8. CTA Section - Hero Section Design */}
       <section className="relative h-[700px] overflow-hidden">
@@ -997,10 +912,10 @@ export function KautilyaFacility() {
             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>
@@ -1008,7 +923,7 @@ export function KautilyaFacility() {
         {/* Content Container */}
         <div className="relative h-full flex items-center justify-end section-margin-x">
           {/* CTA Content Block */}
-          <div 
+          <div
             className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
             style={{ backgroundColor: 'var(--color-brand-primary)' }}
           >
@@ -1017,8 +932,8 @@ export function KautilyaFacility() {
 
             {/* Main Headline */}
             <h2 className="text-h2-white mb-8">
-              Ready to experience Kautilya Facility? 
-              <span 
+              Ready to experience Kautilya Facility?
+              <span
                 className="italic"
                 style={{ color: 'var(--color-brand-accent)' }}
               >
@@ -1028,7 +943,7 @@ export function KautilyaFacility() {
             </h2>
 
             {/* CTA Button */}
-            <StandardCTAButton 
+            <StandardCTAButton
               text="Schedule a Facility Tour"
               onClick={() => navigateTo('/contact?topic=kautilya-facility')}
               ariaLabel="Schedule a Kautilya Facility tour"