All implemaentation and 360deg tour

package-lock.json

@@ -58,6 +58,7 @@
                         "sonner": "^2.0.3",
                         "tailwind-merge": "*",
                         "tailwindcss": "^4.1.12",
+                        "three": "^0.183.2",
                         "vaul": "^1.1.2"
                   },
                   "devDependencies": {
@@ -65,6 +66,7 @@
                         "@types/react": "^19.1.12",
                         "@types/react-dom": "^19.1.8",
                         "@types/react-slick": "^0.23.13",
+                        "@types/three": "^0.183.1",
                         "@vitejs/plugin-react": "^5.0.2",
                         "@vitejs/plugin-react-swc": "^3.10.2",
                         "vite": "^6.3.5"
@@ -387,6 +389,13 @@
                         "node": ">=6.9.0"
                   }
             },
+            "node_modules/@dimforge/rapier3d-compat": {
+                  "version": "0.12.0",
+                  "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+                  "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+                  "dev": true,
+                  "license": "Apache-2.0"
+            },
             "node_modules/@esbuild/win32-x64": {
                   "version": "0.25.9",
                   "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
@@ -2023,6 +2032,13 @@
                         "tailwindcss": "4.1.12"
                   }
             },
+            "node_modules/@tweenjs/tween.js": {
+                  "version": "23.1.3",
+                  "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+                  "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+                  "dev": true,
+                  "license": "MIT"
+            },
             "node_modules/@types/babel__core": {
                   "version": "7.20.5",
                   "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2178,12 +2194,42 @@
                         "@types/react": "*"
                   }
             },
+            "node_modules/@types/stats.js": {
+                  "version": "0.17.4",
+                  "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+                  "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+                  "dev": true,
+                  "license": "MIT"
+            },
+            "node_modules/@types/three": {
+                  "version": "0.183.1",
+                  "resolved": "https://registry.npmjs.org/@types/three/-/three-0.183.1.tgz",
+                  "integrity": "sha512-f2Pu5Hrepfgavttdye3PsH5RWyY/AvdZQwIVhrc4uNtvF7nOWJacQKcoVJn0S4f0yYbmAE6AR+ve7xDcuYtMGw==",
+                  "dev": true,
+                  "license": "MIT",
+                  "dependencies": {
+                        "@dimforge/rapier3d-compat": "~0.12.0",
+                        "@tweenjs/tween.js": "~23.1.3",
+                        "@types/stats.js": "*",
+                        "@types/webxr": ">=0.5.17",
+                        "@webgpu/types": "*",
+                        "fflate": "~0.8.2",
+                        "meshoptimizer": "~1.0.1"
+                  }
+            },
             "node_modules/@types/use-sync-external-store": {
                   "version": "0.0.6",
                   "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
                   "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
                   "license": "MIT"
             },
+            "node_modules/@types/webxr": {
+                  "version": "0.5.24",
+                  "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+                  "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+                  "dev": true,
+                  "license": "MIT"
+            },
             "node_modules/@vitejs/plugin-react": {
                   "version": "5.0.2",
                   "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.2.tgz",
@@ -2226,6 +2272,13 @@
                   "dev": true,
                   "license": "MIT"
             },
+            "node_modules/@webgpu/types": {
+                  "version": "0.1.69",
+                  "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz",
+                  "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==",
+                  "dev": true,
+                  "license": "BSD-3-Clause"
+            },
             "node_modules/aria-hidden": {
                   "version": "1.2.6",
                   "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -2680,6 +2733,13 @@
                         }
                   }
             },
+            "node_modules/fflate": {
+                  "version": "0.8.2",
+                  "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+                  "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+                  "dev": true,
+                  "license": "MIT"
+            },
             "node_modules/framer-motion": {
                   "version": "12.23.12",
                   "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
@@ -2925,6 +2985,13 @@
                         "@jridgewell/sourcemap-codec": "^1.5.5"
                   }
             },
+            "node_modules/meshoptimizer": {
+                  "version": "1.0.1",
+                  "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.0.1.tgz",
+                  "integrity": "sha512-Vix+QlA1YYT3FwmBBZ+49cE5y/b+pRrcXKqGpS5ouh33d3lSp2PoTpCw19E0cKDFWalembrHnIaZetf27a+W2g==",
+                  "dev": true,
+                  "license": "MIT"
+            },
             "node_modules/minipass": {
                   "version": "7.1.2",
                   "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -3579,6 +3646,12 @@
                         "node": ">=18"
                   }
             },
+            "node_modules/three": {
+                  "version": "0.183.2",
+                  "resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
+                  "integrity": "sha512-di3BsL2FEQ1PA7Hcvn4fyJOlxRRgFYBpMTcyOgkwJIaDOdJMebEFPA+t98EvjuljDx4hNulAGwF6KIjtwI5jgQ==",
+                  "license": "MIT"
+            },
             "node_modules/tiny-invariant": {
                   "version": "1.3.3",
                   "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",

package.json

@@ -53,6 +53,7 @@
             "sonner": "^2.0.3",
             "tailwind-merge": "*",
             "tailwindcss": "^4.1.12",
+            "three": "^0.183.2",
             "vaul": "^1.1.2"
       },
       "devDependencies": {
@@ -60,6 +61,7 @@
             "@types/react": "^19.1.12",
             "@types/react-dom": "^19.1.8",
             "@types/react-slick": "^0.23.13",
+            "@types/three": "^0.183.1",
             "@vitejs/plugin-react": "^5.0.2",
             "@vitejs/plugin-react-swc": "^3.10.2",
             "vite": "^6.3.5"

src/App.tsx

@@ -32,7 +32,6 @@ import HomePage from './pages/HomePage';
 import { AboutUs } from './components/AboutUs';
 import { Services } from './components/Services';
 import { LearningFacilityNew } from './components/LearningFacilityNew';
-import HomePageNew from './pages/HomePageNew';
 import { FooterNew } from './components/FooterNew';
 import { Privacy } from "./pages/Privacy";
 import { TermsCondition } from "./pages/TermsCondition";
@@ -108,8 +107,8 @@ export default function App() {
             <Route path="/contact" element={<Contact />} />
 
             {/* Dynamic Routes */}
-            <Route path="/learning/articles/:slug" element={<BlogDetail />} />
+            <Route path="/learning/articles/:slugAndId" element={<BlogDetail />} />
-            <Route path="/learning/blogs/:slug" element={<BlogDetail />} />
+            {/* <Route path="/learning/blogs/:slug" element={<BlogDetail />} /> */}
             {/* <Route path="/learning/webcast/:slug" element={<WebinarDetail />} />
             <Route path="/webinar/:slug" element={<WebinarDetail />} /> */}
             <Route path="/course/:slug" element={<ProgrammeDetail />} />

src/components/AboutUs.tsx

@@ -35,6 +35,7 @@ import Balaji from '../assets/Balaji-Chandrakumar.jpeg';
 import Ramesh from '../assets/Ramesh-Padmanabhan.jpeg';
 import Diju from '../assets/Diju.jpeg';
 import svgPaths from '../imports/svg-kw7r0ellyk';
+import { useGetAboutUsQuery } from '../redux/services/aboutUsApi';
 
 // Leadership Orientations Data
 const leadershipOrientations = [
@@ -83,8 +84,8 @@ const benefits = [
   'We recommend that the Leadership intervention is designed for a period of 12-15 months with multiple touch points which can constitute a combination of classroom, fire side chats, one-on-one sessions, address by an expert, use of profilers, accessing online content on concepts and accomplished leaders\' experiences'
 ];
 
-// Team Members Data with Full Profiles
+// Team Members Data with Full Profiles (Static - can be kept or also fetched from API if needed)
-const teamMembers = [
+const staticTeamMembers = [
   {
     name: 'Mr. K Ramkumar',
     role: 'Managing Director',
@@ -271,14 +272,38 @@ After a career break, she joined KLC as Practice Head. She now co-creates leader
   }
 ];
 
+// Loading Skeleton Component
+const AboutUsSkeleton = () => (
+  <div className="animate-pulse">
+    {/* Hero Section Skeleton */}
+    <section className="relative min-h-[85vh] flex flex-col bg-gray-200">
+      <div className="absolute inset-0 bg-gray-300"></div>
+      <div className="relative z-10 flex-1 flex items-center">
+        <div className="w-full section-margin-x">
+          <div className="max-w-6xl">
+            <div className="h-16 bg-gray-400 rounded-lg w-3/4 mb-8"></div>
+            <div className="h-24 bg-gray-400 rounded-lg w-2/3 mb-8"></div>
+            <div className="h-12 bg-gray-400 rounded-lg w-48"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    {/* Add more skeleton sections as needed */}
+    <div className="py-24 text-center text-gray-500">Loading...</div>
+  </div>
+);
 
 export function AboutUs() {
   const [isVisible, setIsVisible] = useState(false);
   const [expandedValue, setExpandedValue] = useState<string | null>('context');
-  const [selectedMember, setSelectedMember] = useState<typeof teamMembers[0] | null>(null);
+  const [selectedMember, setSelectedMember] = useState<typeof staticTeamMembers[0] | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const handleMemberClick = (member: typeof teamMembers[0]) => {
+  // Fetch About Us data from API
+  const { data: aboutUsData, isLoading, isError, error } = useGetAboutUsQuery();
+
+  const handleMemberClick = (member: typeof staticTeamMembers[0]) => {
     setSelectedMember(member);
     setIsModalOpen(true);
   };
@@ -296,7 +321,6 @@ export function AboutUs() {
       document.body.style.overflow = '';
     }
 
-    // Cleanup on unmount
     return () => {
       document.body.style.overflow = '';
     };
@@ -305,9 +329,8 @@ export function AboutUs() {
   useEffect(() => {
     setIsVisible(true);
 
-    // Timeline fill animation on scroll
     const handleScroll = () => {
-      const timelineSection = document.querySelector('#timeline-fill-line');
+      const timelineSection = document.querySelector('#timeline-fill-line') as HTMLElement | null;
       const timelineContainer = timelineSection?.parentElement;
 
       if (!timelineSection || !timelineContainer) return;
@@ -315,47 +338,56 @@ export function AboutUs() {
       const rect = timelineContainer.getBoundingClientRect();
       const windowHeight = window.innerHeight;
 
-      // Calculate how much of the timeline is visible
       const sectionTop = rect.top;
       const sectionHeight = rect.height;
       const visibleTop = Math.max(0, windowHeight - sectionTop);
       const visibleHeight = Math.min(visibleTop, sectionHeight);
       const scrollProgress = Math.max(0, Math.min(1, visibleHeight / sectionHeight));
 
-      // Calculate the exact position to end at Phase 3 dot
+      const maxFillHeight = 'calc(100% - 1rem)';
-      const maxFillHeight = 'calc(100% - 1rem)'; // Match the background line limit
 
-      // Apply progressive fill that respects the maximum height constraint
       if (scrollProgress >= 0.9) {
-        // When nearly complete, set to exact end position
         timelineSection.style.height = maxFillHeight;
       } else {
-        // Progressive fill up to 90% of the way
         timelineSection.style.height = `${scrollProgress * 90}%`;
       }
     };
 
-    // Add scroll listener
     window.addEventListener('scroll', handleScroll);
-
-    // Initial call to set the initial state
     handleScroll();
 
-    // Cleanup
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
   }, []);
 
+  // Show loading skeleton while fetching data
+  if (isLoading) {
+    return <AboutUsSkeleton />;
+  }
+
+  // Show error state if API call fails
+  if (isError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-red-600 mb-4">Error Loading Page</h2>
+          <p className="text-gray-600 mb-4">Failed to load About Us content. Please try again later.</p>
+          <Button onClick={() => window.location.reload()}>Retry</Button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
-      {/* Hero Section - Our Vision Page Style */}
+      {/* Hero Section - Dynamic from API */}
       <section className="relative min-h-[85vh] flex flex-col">
         <div className="absolute inset-0 z-0">
           <div
             className="w-full h-full bg-cover bg-center bg-no-repeat"
             style={{
-              backgroundImage: `url('https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop')`
+              backgroundImage: `url('${aboutUsData?.hero_section?.background_image_url || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1920&h=1080&fit=crop'}')`
             }}
           />
           <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
@@ -364,32 +396,22 @@ export function AboutUs() {
         <div className="relative z-10 flex-1 flex items-center">
           <div className="w-full section-margin-x">
             <div className="max-w-6xl">
-              {/* Back Navigation */}
-              {/* <div className="mb-8">
-                <Button
-                  variant="ghost"
-                  onClick={() => navigateTo('/services')}
-                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
-                >
-                  <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to Services
-                </Button>
-              </div> */}
-
               <div className="mb-8">
                 <h1 className="text-h1-white">
-                  Advancing Leadership Through Insight
+                  {aboutUsData?.hero_section?.headline || "Advancing Leadership Through Insight"}
                 </h1>
               </div>
 
               <p className="text-body-lg-white mb-8 max-w-3xl">
-                <strong>Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential.</strong>
+                <strong>
+                  {aboutUsData?.hero_section?.subtext || "Founded in 2016 with the vision of being a world class institution in the thought and practice of leadership. We facilitate institutions to build Leadership capacity and capability while helping individuals unleash their potential."}
+                </strong>
               </p>
 
               <div className="flex justify-start">
                 <PrimaryCTAButton
-                  text="Talk to Us"
+                  text={aboutUsData?.hero_section?.cta_text || "Talk to Us"}
-                  onClick={() => navigateTo('/contact?topic=management-development')}
+                  onClick={() => navigateTo(aboutUsData?.hero_section?.cta_destination || '/contact?topic=management-development')}
                   ariaLabel="Talk to us about management development"
                   className="primary-cta-button-blue cta-text-white"
                 />
@@ -399,7 +421,7 @@ export function AboutUs() {
         </div>
       </section>
 
-      {/* Section 1: Our Promise */}
+      {/* Section 1: Our Promise - Dynamic from API */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
@@ -410,7 +432,7 @@ export function AboutUs() {
               viewport={{ once: true }}
               className="text-center"
             >
-              <BrandedTag text="Our Promise" />
+              <BrandedTag text={aboutUsData?.our_promise_title || "Our Promise"} />
               <h2 className="text-h1 mb-8" style={{
                 fontSize: 'clamp(2.5rem, 5vw, 4rem)',
                 lineHeight: '1.1',
@@ -423,7 +445,7 @@ export function AboutUs() {
         </div>
       </section>
 
-      {/* Section 2: How We Work */}
+      {/* Section 2: How We Work - Dynamic from API */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
@@ -434,12 +456,44 @@ export function AboutUs() {
               viewport={{ once: true }}
               className="text-center mb-16"
             >
-              <BrandedTag text="How We Work" />
+              <BrandedTag text={aboutUsData?.how_we_work_title || "How We Work"} />
-              <h2 className="text-h2 mb-8">How We Work</h2>
+              <h2 className="text-h2 mb-8">{aboutUsData?.how_we_work_title || "How We Work"}</h2>
             </motion.div>
 
-            {/* Four Key Points Grid */}
+            {/* Four Key Points Grid - Using API data if available, otherwise fallback to static */}
             <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
+              {(aboutUsData?.how_we_work && aboutUsData.how_we_work.length > 0) ? (
+                aboutUsData.how_we_work.map((item, index) => (
+                  <motion.div
+                    key={item.id}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
+                    viewport={{ once: true }}
+                    className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100"
+                  >
+                    <div className="flex items-start gap-4">
+                      <div
+                        className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
+                        style={{ backgroundColor: 'var(--color-primary)' }}
+                      >
+                        {index === 0 && <Puzzle className="w-6 h-6 text-white" />}
+                        {index === 1 && <Target className="w-6 h-6 text-white" />}
+                        {index === 2 && <BookOpen className="w-6 h-6 text-white" />}
+                        {index === 3 && <Zap className="w-6 h-6 text-white" />}
+                      </div>
+                      <div>
+                        <h3 className="text-h4 mb-4">{item.title}</h3>
+                        <p className="text-body text-muted leading-relaxed">
+                          {item.description}
+                        </p>
+                      </div>
+                    </div>
+                  </motion.div>
+                ))
+              ) : (
+                // Fallback to static data if API data is not available
+                <>
                   <motion.div
                     initial={{ opacity: 0, y: 30 }}
                     whileInView={{ opacity: 1, y: 0 }}
@@ -531,12 +585,14 @@ export function AboutUs() {
                       </div>
                     </div>
                   </motion.div>
+                </>
+              )}
             </div>
           </div>
         </div>
       </section>
 
-      {/* Section 3: Who We Are - Updated Statistics */}
+      {/* Section 3: Who We Are - Updated Statistics - Dynamic from API */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
@@ -552,7 +608,7 @@ export function AboutUs() {
                 <div className="lg:col-span-1">
                   <div className="branded-tag-system">
                     <div className="dot"></div>
-                    <span className="text">Who we are</span>
+                    <span className="text">{aboutUsData?.who_we_are_title || "Who we are"}</span>
                   </div>
                 </div>
 
@@ -568,8 +624,34 @@ export function AboutUs() {
                 </div>
               </div>
 
-              {/* Updated Statistics Grid */}
+              {/* Updated Statistics Grid - Dynamic from API */}
               <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 lg:gap-12 pt-12 border-t border-gray-200">
+                {(aboutUsData?.stat_section && aboutUsData.stat_section.length > 0) ? (
+                  aboutUsData.stat_section.map((stat, index) => (
+                    <motion.div
+                      key={stat.id}
+                      initial={{ opacity: 0, y: 20 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.6, delay: 0.1 * (index + 1) }}
+                      viewport={{ once: true }}
+                      className="text-center lg:text-left"
+                    >
+                      <div className="text-5xl lg:text-6xl font-medium mb-2" style={{
+                        fontFamily: 'var(--font-family-base)',
+                        lineHeight: '1',
+                        color: 'var(--color-primary)'
+                      }}>
+                        {stat.number}{stat.suffix}
+                      </div>
+                      <div className="flex items-center justify-center lg:justify-start gap-2 text-body text-muted" style={{ fontFamily: 'var(--font-family-base)' }}>
+                        <div className="w-2 h-2 rounded-sm" style={{ backgroundColor: 'var(--color-accent)' }}></div>
+                        <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>{stat.label.toUpperCase()}</span>
+                      </div>
+                    </motion.div>
+                  ))
+                ) : (
+                  // Fallback to static statistics if API data is not available
+                  <>
                     <motion.div
                       initial={{ opacity: 0, y: 20 }}
                       whileInView={{ opacity: 1, y: 0 }}
@@ -649,15 +731,15 @@ export function AboutUs() {
                         <span style={{ color: 'var(--color-black)', fontWeight: '500' }}>PRESENCE</span>
                       </div>
                     </motion.div>
+                  </>
+                )}
               </div>
             </motion.div>
           </div>
         </div>
       </section>
 
-
+      {/* Section 4: Our Team - Dynamic from API */}
-
-      {/* Section 4: Our Team */}
       <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
@@ -669,8 +751,8 @@ export function AboutUs() {
               viewport={{ once: true }}
               className="text-center mb-16"
             >
-              <BrandedTag text="Our Team" />
+              <BrandedTag text={aboutUsData?.our_team_title || "Our Team"} />
-              <h2 className="text-h2 mb-8">Our Team</h2>
+              <h2 className="text-h2 mb-8">{aboutUsData?.our_team_title || "Our Team"}</h2>
               <div className="max-w-4xl mx-auto text-center space-y-6">
                 <p className="text-body-lg text-muted leading-relaxed">
                   We have a team of 7 consultants and 4 young consultants. All our senior Consultants are ex-business professionals with experience ranging from 15-30 years in varied business functions and carry a deep understanding of the area they are engaging in. Two of them bring in Board room experience. – Meet them
@@ -678,9 +760,9 @@ export function AboutUs() {
               </div>
             </motion.div>
 
-            {/* Team Members Grid */}
+            {/* Team Members Grid - Using static team members with full profiles */}
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
-              {teamMembers.map((member, index) => (
+              {staticTeamMembers.map((member, index) => (
                 <motion.div
                   key={member.name}
                   initial={{ opacity: 0, y: 30 }}
@@ -725,11 +807,60 @@ export function AboutUs() {
                 </motion.div>
               ))}
             </div>
+
+            {/* Alternative: Use API team data if needed */}
+            {/* {aboutUsData?.our_team && aboutUsData.our_team.length > 0 && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
+                {aboutUsData.our_team.map((member, index) => (
+                  <motion.div
+                    key={member.id}
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: index * 0.1 }}
+                    viewport={{ once: true }}
+                    className="text-left cursor-pointer"
+                  >
+                    <div className="relative mb-6 group">
+                      <div className="aspect-square rounded-2xl overflow-hidden bg-gray-100 shadow-lg group-hover:shadow-xl transition-all duration-300">
+                        <img
+                          src={member.photo_url}
+                          alt={member.alt_text}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                        />
+                      </div>
+                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300 rounded-2xl flex items-center justify-center">
+                        <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                          <div
+                            className="px-4 py-2 rounded-lg text-white text-small"
+                            style={{
+                              backgroundColor: '#04045B',
+                              fontFamily: 'var(--font-family-base)',
+                              fontWeight: '500'
+                            }}
+                          >
+                            View Profile
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <h3 className="text-h4 text-black group-hover:text-primary transition-colors duration-300">
+                        {member.name_role.split(' - ')[0]}
+                      </h3>
+                      <p className="text-body text-muted leading-relaxed">
+                        {member.name_role.split(' - ')[1] || ''}
+                      </p>
+                      <p className="text-small text-muted">{member.bio}</p>
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            )} */}
           </div>
         </div>
       </section>
 
-      {/* Section 5: Our Methodology */}
+      {/* Section 5: Our Methodology (Static - unchanged) */}
       <section className="py-16 lg:py-20" style={{ backgroundColor: '#FFFFFF' }}>
         <div className="section-margin-x">
           <div className="max-w-6xl mx-auto">
@@ -750,19 +881,19 @@ export function AboutUs() {
               <div
                 className="absolute left-4 top-0 w-0.5 bg-gray-300"
                 style={{
-                  height: 'calc(100% - 1rem)', // Adjusted to end exactly at Phase 3 dot
+                  height: 'calc(100% - 1rem)',
                   zIndex: 1
                 }}
               ></div>
 
-              {/* Vertical Line Fill - Blue - Animated on Scroll - Ends exactly at Phase 3 dot */}
+              {/* Vertical Line Fill - Blue - Animated on Scroll */}
               <div
                 id="timeline-fill-line"
                 className="absolute left-4 top-0 w-0.5 transition-all duration-1000 ease-out"
                 style={{
                   backgroundColor: 'var(--color-primary)',
                   height: '0%',
-                  maxHeight: 'calc(100% - 1rem)', // Limit to Phase 3 dot position
+                  maxHeight: 'calc(100% - 1rem)',
                   zIndex: 2
                 }}
               ></div>
@@ -1168,8 +1299,6 @@ export function AboutUs() {
         </div>
       </section>
 
-
-
       {/* Testimonials Section */}
       <TestimonialsSection
         title="What Our Clients Say About Us"

src/components/Articles.tsx

@@ -1,113 +1,127 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Button } from './ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
-import { Badge } from './ui/badge';
-import { Input } from './ui/input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { ImageWithFallback } from './figma/ImageWithFallback';
-import { PrimaryCTAButton } from './PrimaryCTAButton';
-import { navigateTo } from './Router';
 import {
-  Search,
-  Calendar,
-  User,
-  ArrowRight,
   BookOpen,
+  ChevronLeft,
+  ChevronRight,
   Filter,
   Grid,
   List,
-  SortAsc,
+  Search,
-  Clock,
-  Eye,
-  Star,
-  ChevronLeft,
-  ChevronRight,
   X
 } from 'lucide-react';
-import { articlesData } from '../data/articlesData';
+import { useRef, useState, useEffect } from 'react';
+import { BlogItem, useGetBlogsQuery } from '../redux/services/blogApi';
+import { useGetFaqCategoriesQuery } from '../redux/services/faqApi';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { PrimaryCTAButton } from './PrimaryCTAButton';
+import { navigateTo } from './Router';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Card, CardContent } from './ui/card';
+import { Input } from './ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { FullScreenLoader } from './FullScreenLoader';
+import { getSlugWithId } from '../utils/urlHelpers';
+
+// Define category type with ID and name
+interface CategoryOption {
+  id: string;
+  name: string;
+}
+
+type DateRange =
+  | 'all_time'
+  | 'last_7_days'
+  | 'last_30_days'
+  | 'last_3_months'
+  | 'last_6_months';
+
+type SortBy =
+  | 'most_recent'
+  | 'oldest_first'
+  | 'title_az';
 
 export function Articles() {
   const [searchTerm, setSearchTerm] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState('All Categories');
+  const [selectedCategory, setSelectedCategory] = useState<CategoryOption>({ id: 'all', name: 'All Categories' });
-  const [selectedAuthor, setSelectedAuthor] = useState('All Authors');
   const [selectedReadTime, setSelectedReadTime] = useState('All Read Times');
-  const [selectedDateRange, setSelectedDateRange] = useState('All Time');
+  const [selectedDateRange, setSelectedDateRange] = useState<DateRange>('all_time');
-  const [selectedTopic, setSelectedTopic] = useState('All Topics');
+  const [selectedTopic, setSelectedTopic] = useState<{
-  const [sortBy, setSortBy] = useState('Most Recent');
+    id: string;
+    name: string;
+  }>({
+    id: 'all',
+    name: 'All Topics'
+  });
+  const [sortBy, setSortBy] = useState<SortBy>('most_recent');
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [currentPage, setCurrentPage] = useState(1);
-  const articlesPerPage = 4;
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const articlesPerPage = 6;
   const containerRef = useRef<HTMLDivElement>(null);
+  const [allTags, setAllTags] = useState<{ id: string; name: string }[]>([]);
 
-  // Use articlesData instead of the old articles variable
+  // Fetch categories for filter dropdown
-  const articles = articlesData;
+  const {
-
+    data: categoriesData,
-  // Get unique values for filters - FIXED: using articlesData
+    isLoading: isLoadingCategories
-  const categories = ['All Categories', ...Array.from(new Set(articlesData.map(article => article.category)))];
+  } = useGetFaqCategoriesQuery({
-  const authors = ['All Authors', ...Array.from(new Set(articlesData.map(article => article.author)))];
+    limit: 100,
-  const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min'];
+    offset: 0
-  const dateRanges = ['All Time', 'Last 7 days', 'Last 30 days', 'Last 3 months'];
-  const allTags = Array.from(new Set(articlesData.flatMap(article => article.tags)));
-  const sortOptions = [
-    { value: 'Most Recent', label: 'Most Recent' },
-    { value: 'oldest', label: 'Oldest First' },
-    { value: 'title', label: 'Title A-Z' },
-    { value: 'readTime', label: 'Read Time' },
-    { value: 'popular', label: 'Most Popular' }
-  ];
-
-  // Filter and sort articles - FIXED: using articlesData
-  const filteredArticles = articlesData.filter(article => {
-    const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      article.author.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      article.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
-    const matchesCategory = selectedCategory === 'All Categories' || article.category === selectedCategory;
-    const matchesAuthor = selectedAuthor === 'All Authors' || article.author === selectedAuthor;
-
-    // FIXED: Read time filter - properly parse the read time
-    const readTimeMinutes = parseInt(article.readTime.replace(' min read', '')) || 0;
-    const matchesReadTime = selectedReadTime === 'All Read Times' ||
-      (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
-      (selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
-      (selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
-
-    // Date range filter
-    const articleDate = new Date(article.date);
-    const now = new Date();
-    const matchesDateRange = selectedDateRange === 'All Time' ||
-      (selectedDateRange === 'Last 7 days' && (now.getTime() - articleDate.getTime()) <= 7 * 24 * 60 * 60 * 1000) ||
-      (selectedDateRange === 'Last 30 days' && (now.getTime() - articleDate.getTime()) <= 30 * 24 * 60 * 60 * 1000) ||
-      (selectedDateRange === 'Last 3 months' && (now.getTime() - articleDate.getTime()) <= 90 * 24 * 60 * 60 * 1000);
-
-    // Topic filter
-    const matchesTopic = selectedTopic === 'All Topics' ||
-      article.tags.includes(selectedTopic);
-
-    return matchesSearch && matchesCategory && matchesAuthor && matchesReadTime && matchesDateRange && matchesTopic;
-  }).sort((a, b) => {
-    switch (sortBy) {
-      case 'Most Recent':
-        return new Date(b.date).getTime() - new Date(a.date).getTime();
-      case 'oldest':
-        return new Date(a.date).getTime() - new Date(b.date).getTime();
-      case 'title':
-        return a.title.localeCompare(b.title);
-      case 'readTime':
-        // FIXED: Sort by read time - properly parse the values
-        return (parseInt(a.readTime.replace(' min read', '')) || 0) - (parseInt(b.readTime.replace(' min read', '')) || 0);
-      case 'popular':
-        return parseInt(b.views) - parseInt(a.views);
-      default:
-        return 0;
-    }
   });
 
-  // Paginate results
+  // Filter categories to only those for blog and create options with id and name
-  const totalPages = Math.ceil(filteredArticles.length / articlesPerPage);
+  const categories: CategoryOption[] = [
-  const startIndex = (currentPage - 1) * articlesPerPage;
+    { id: 'all', name: 'All Categories' },
-  const currentArticles = filteredArticles.slice(startIndex, startIndex + articlesPerPage);
+    ...(categoriesData?.data?.items
+      ?.filter((category: any) => category.for_blog)
+      .map((category: any) => ({
+        id: category.id,
+        name: category.category_name
+      })) || [])
+  ];
 
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchTerm);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Fetch blogs from API with all parameters
+  const {
+    data: blogsData,
+    isLoading: isLoadingBlogs,
+    isError: isBlogsError,
+    refetch: refetchBlogs
+  } = useGetBlogsQuery({
+    limit: articlesPerPage,
+    offset: (currentPage - 1) * articlesPerPage,
+    search: debouncedSearch || undefined,
+    content_status: 'publish',
+    content_type: 'BLOG',
+    date_range: selectedDateRange !== 'all_time' ? selectedDateRange : undefined,
+    sort_by: sortBy,
+    content_category_id: selectedCategory.id !== 'all' ? selectedCategory.id : undefined, // Send UUID
+    tag_id: selectedTopic.id !== 'all' ? selectedTopic.id : undefined,
+  });
+
+
+  const sortOptions = [
+    { value: 'most_recent', label: 'Most Recent' },
+    { value: 'oldest_first', label: 'Oldest First' },
+    { value: 'title_az', label: 'Title A-Z' }
+  ];
+
+  const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min'];
+  const dateRanges = [
+    { value: 'all_time', label: 'All Time' },
+    { value: 'last_7_days', label: 'Last 7 days' },
+    { value: 'last_30_days', label: 'Last 30 days' },
+    { value: 'last_3_months', label: 'Last 3 months' }
+  ];
+
+  // Format date function
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -116,25 +130,94 @@ export function Articles() {
     });
   };
 
-  const clearAllFilters = () => {
+  // Calculate read time based on content length (approx)
-    setSearchTerm('');
+  const calculateReadTime = (content: string): string => {
-    setSelectedCategory('All Categories');
+    const wordsPerMinute = 200;
-    setSelectedAuthor('All Authors');
+    const wordCount = content.split(/\s+/).length;
-    setSelectedReadTime('All Read Times');
+    const minutes = Math.ceil(wordCount / wordsPerMinute);
-    setSelectedDateRange('All Time');
+    return `${minutes} min read`;
-    setSelectedTopic('All Topics');
-    setSortBy('Most Recent');
   };
 
-  const hasActiveFilters = searchTerm ||
+  // Filter articles by read time (client-side only - API doesn't support this)
-    selectedCategory !== 'All Categories' ||
+  const getReadTimeFilteredArticles = () => {
-    selectedAuthor !== 'All Authors' ||
+    if (selectedReadTime === 'All Read Times' || !blogsData?.data?.items) {
+      return blogsData?.data?.items || [];
+    }
+
+    return (blogsData?.data?.items || []).filter((blog: BlogItem) => {
+      const readTimeMinutes = parseInt(calculateReadTime(blog.content).replace(' min read', '')) || 0;
+      return (selectedReadTime === 'Under 5 min' && readTimeMinutes < 5) ||
+        (selectedReadTime === '5-10 min' && readTimeMinutes >= 5 && readTimeMinutes <= 10) ||
+        (selectedReadTime === 'Over 10 min' && readTimeMinutes > 10);
+    });
+  };
+
+  const finalFilteredArticles = getReadTimeFilteredArticles();
+
+  const totalPages = Math.ceil((blogsData?.data?.pagination?.total || 0) / articlesPerPage);
+
+  const clearAllFilters = () => {
+    setSearchTerm('');
+    setDebouncedSearch('');
+    setSelectedCategory({ id: 'all', name: 'All Categories' });
+    setSelectedReadTime('All Read Times');
+    setSelectedDateRange('all_time');
+    setSelectedTopic({ id: 'all', name: 'All Topics' });
+    setSortBy('most_recent');
+    setCurrentPage(1);
+  };
+
+  const hasActiveFilters = Boolean(
+    searchTerm ||
+    selectedCategory.id !== 'all' ||
     selectedReadTime !== 'All Read Times' ||
-    selectedDateRange !== 'All Time' ||
+    selectedDateRange !== 'all_time' ||
-    selectedTopic !== 'All Topics';
+    selectedTopic.id !== 'all'
+  );
+
+  useEffect(() => {
+  if (!blogsData?.data?.items || allTags.length > 0) return;
+
+  const tags = Array.from(
+    new Map(
+      blogsData.data.items
+        .flatMap((blog: BlogItem) => blog.blog_tags || [])
+        .map(tag => [tag.id, { id: tag.id, name: tag.tag_name }])
+    ).values()
+  );
+
+  setAllTags(tags);
+}, [blogsData]);
+
+  // Handle loading state
+  if (isLoadingBlogs || isLoadingCategories) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <FullScreenLoader text="Loading articles..." />
+      </div>
+    );
+  }
+
+  // Handle error state
+  if (isBlogsError) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <X className="w-8 h-8 text-red-600" />
+          </div>
+          <h2 className="text-h3 mb-2">Failed to load articles</h2>
+          <p className="text-gray-600 mb-4">Please try again later</p>
+          <Button onClick={() => refetchBlogs()}>
+            Retry
+          </Button>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div style={{ backgroundColor: '#FFFFFF' }}>
+    <div style={{ backgroundColor: '#FFFFFF' }} ref={containerRef}>
       {/* Hero Section */}
       <section className="relative py-28 overflow-hidden">
         <div className="absolute inset-0">
@@ -169,18 +252,16 @@ export function Articles() {
             <div className="section-margin-x">
               <div className="grid grid-cols-3 gap-8 text-center">
                 <div>
-                  {/* FIXED: Using articlesData.length */}
+                  <div className="text-h2-white mb-2">{blogsData?.data?.pagination?.total || 0}+</div>
-                  <div className="text-h2-white mb-2">{articlesData.length}+</div>
                   <div className="text-small-white">Expert Articles</div>
                 </div>
                 <div>
-                  {/* FIXED: Using categories from articlesData */}
                   <div className="text-h2-white mb-2">{categories.length - 1}</div>
                   <div className="text-small-white">Categories</div>
                 </div>
                 <div>
-                  <div className="text-h2-white mb-2">25,400</div>
+                  <div className="text-h2-white mb-2">{allTags.length}+</div>
-                  <div className="text-small-white">Total Reads</div>
+                  <div className="text-small-white">Topics</div>
                 </div>
               </div>
             </div>
@@ -197,7 +278,7 @@ export function Articles() {
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
               <Input
                 type="text"
-                placeholder="Search articles, authors, topics..."
+                placeholder="Search articles..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
                 className="pl-10 pr-4 py-3 text-body rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 w-full bg-gray-50"
@@ -298,46 +379,37 @@ export function Articles() {
                         <label className="block text-small mb-2 font-medium text-gray-700">
                           Category
                         </label>
-                        <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                        <Select
-                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
+                          value={selectedCategory.id}
-                            <SelectValue placeholder="All Categories" />
+                          onValueChange={(value: string) => {
+                            const category = categories.find(c => c.id === value);
+                            if (category) {
+                              setSelectedCategory(category);
+                            }
+                          }}
+                        >
+                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
+                            <SelectValue placeholder="All Categories">
+                              {selectedCategory.name}
+                            </SelectValue>
                           </SelectTrigger>
                           <SelectContent>
                             {categories.map((category) => (
-                              <SelectItem key={category} value={category} className="text-small">
+                              <SelectItem key={category.id} value={category.id} className="text-small">
-                                {category}
+                                {category.name}
                               </SelectItem>
                             ))}
                           </SelectContent>
                         </Select>
                       </div>
 
-                      {/* Author Filter */}
+                      {/* Read Time Filter - Client-side only */}
-                      <div className="filter-section">
-                        <label className="block text-small mb-2 font-medium text-gray-700">
-                          Author
-                        </label>
-                        <Select value={selectedAuthor} onValueChange={setSelectedAuthor}>
-                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
-                            <SelectValue placeholder="All Authors" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {authors.map((author) => (
-                              <SelectItem key={author} value={author} className="text-small">
-                                {author}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      {/* Read Time Filter */}
                       <div className="filter-section">
                         <label className="block text-small mb-2 font-medium text-gray-700">
                           Read Time
                         </label>
                         <Select value={selectedReadTime} onValueChange={setSelectedReadTime}>
-                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
+                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
                             <SelectValue placeholder="All Read Times" />
                           </SelectTrigger>
                           <SelectContent>
@@ -356,13 +428,13 @@ export function Articles() {
                           Date Range
                         </label>
                         <Select value={selectedDateRange} onValueChange={setSelectedDateRange}>
-                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
+                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
                             <SelectValue placeholder="All Time" />
                           </SelectTrigger>
                           <SelectContent>
-                            {dateRanges.map((dateRange) => (
+                            {dateRanges.map((range) => (
-                              <SelectItem key={dateRange} value={dateRange} className="text-small">
+                              <SelectItem key={range.value} value={range.value}>
-                                {dateRange}
+                                {range.label}
                               </SelectItem>
                             ))}
                           </SelectContent>
@@ -374,17 +446,28 @@ export function Articles() {
                         <label className="block text-small mb-2 font-medium text-gray-700">
                           Topic
                         </label>
-                        <Select value={selectedTopic} onValueChange={setSelectedTopic}>
+                        <Select
-                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors" style={{ '&:focus': { borderColor: 'var(--color-primary)' } }}>
+                          value={selectedTopic.id}
+                          onValueChange={(value: string) => {
+                            if (value === 'all') {
+                              setSelectedTopic({ id: 'all', name: 'All Topics' });
+                              return;
+                            }
+                            const topic = allTags.find(t => t.id === value);
+                            if (topic) setSelectedTopic(topic);
+                          }}
+                        >
+                          <SelectTrigger className="w-full text-small h-9 border-gray-300 hover:border-gray-400 transition-colors">
                             <SelectValue placeholder="All Topics" />
                           </SelectTrigger>
                           <SelectContent>
-                            <SelectItem value="All Topics" className="text-small">
+                            <SelectItem value="all">
                               All Topics
                             </SelectItem>
+
                             {allTags.map((tag) => (
-                              <SelectItem key={tag} value={tag} className="text-small">
+                              <SelectItem key={tag.id} value={tag.id}>
-                                {tag}
+                                {tag.name}
                               </SelectItem>
                             ))}
                           </SelectContent>
@@ -399,73 +482,85 @@ export function Articles() {
             {/* Right Content Area - Scrollable Articles */}
             <div className="col-span-12 lg:col-span-9">
               <div className="mb-4 text-small text-muted">
-                Showing {currentArticles.length} of {filteredArticles.length} articles
+                Showing {finalFilteredArticles.length} of {blogsData?.data?.pagination?.total || 0} articles
               </div>
 
               {/* Articles Results */}
-              {currentArticles.length === 0 ? (
+              {finalFilteredArticles.length === 0 ? (
                 <div className="text-center py-12">
+                  <BookOpen className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                   <p className="text-body-lg text-muted">
                     No articles found matching your criteria.
                   </p>
+                  {hasActiveFilters && (
+                    <Button
+                      variant="outline"
+                      onClick={clearAllFilters}
+                      className="mt-4"
+                    >
+                      Clear Filters
+                    </Button>
+                  )}
                 </div>
               ) : (
                 <>
                   {/* Grid View */}
                   {viewMode === 'grid' && (
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      {currentArticles.map((article) => (
+                      {finalFilteredArticles.map((article: BlogItem) => (
                         <Card
                           key={article.id}
                           className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
-                          onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
+                          onClick={() => {
+                            // Use slug_name to create the URL with full UUID
+                            const url = getSlugWithId(article.slug_name, article.id);
+                            navigateTo(`/learning/articles/${url}`);
+                          }}
                         >
                           <div className="aspect-video w-full bg-gray-100 overflow-hidden relative">
                             <ImageWithFallback
-                              src={article.thumbnail}
+                              src={article.banner_img || 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnRpY2xlJTIwYmxvZyUyMGNvbnRlbnQlMjBrbm93bGVkZ2V8ZW58MXx8fHwxNzU1ODU0Mjg2fDA&ixlib=rb-4.1.0&q=80&w=1080'}
                               alt={article.title}
                               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                             />
-                            {article.featured && (
-                              <div className="absolute top-4 right-4">
-                                <Badge
-                                  variant="secondary"
-                                  className="bg-yellow-100 text-yellow-800 border-yellow-200"
-                                >
-                                  Featured
-                                </Badge>
-                              </div>
-                            )}
                           </div>
                           <CardContent className="p-6">
                             <div className="flex items-center gap-2 mb-3">
                               <Badge variant="outline" className="text-small">
-                                {article.category}
+                                {article.content_category}
                               </Badge>
-                              <span className="text-small text-muted">{article.readTime}</span>
+                              <span className="text-small text-muted">
+                                {calculateReadTime(article.content)}
+                              </span>
                             </div>
 
-                            <h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
+                            <h3 className="text-h4 mb-3 group-hover:text-[#04045B] transition-colors line-clamp-2">
                               {article.title}
                             </h3>
 
                             <p className="text-small text-muted mb-4 line-clamp-3">
-                              {article.excerpt}
+                              {article.short_description || article.content.substring(0, 150) + '...'}
                             </p>
 
-                            <div className="flex items-center justify-between">
+                            <div className="flex items-center justify-end gap-2">
-                              <div className="flex items-center gap-2">
-                                <ImageWithFallback
-                                  src={article.authorAvatar}
-                                  alt={article.author}
-                                  className="w-6 h-6 rounded-full object-cover"
-                                />
-                                <span className="text-small">{article.author}</span>
-                              </div>
                               <div className="text-small text-muted">
-                                {formatDate(article.date)}
+                                {formatDate(article.updated_at)}
                               </div>
                             </div>
+
+                            {/* Display tags if available */}
+                            {article.blog_tags && article.blog_tags.length > 0 && (
+                              <div className="flex flex-wrap gap-1 mt-3 pt-3 border-t border-gray-100">
+                                {article.blog_tags.slice(0, 3).map((tag, idx) => (
+                                  <Badge key={idx} variant="secondary" className="text-xs">
+                                    {tag.tag_name}
+                                  </Badge>
+                                ))}
+                                {article.blog_tags.length > 3 && (
+                                  <span className="text-xs text-gray-500">+{article.blog_tags.length - 3}</span>
+                                )}
+                              </div>
+                            )}
                           </CardContent>
                         </Card>
                       ))}
@@ -475,29 +570,23 @@ export function Articles() {
                   {/* List View */}
                   {viewMode === 'list' && (
                     <div className="space-y-6">
-                      {currentArticles.map((article) => (
+                      {finalFilteredArticles.map((article: BlogItem) => (
                         <Card
                           key={article.id}
                           className="overflow-hidden hover:shadow-lg transition-all duration-300 cursor-pointer group"
-                          onClick={() => navigateTo(`/learning/articles/${article.slug}`)}
+                          onClick={() => {
+                            // Use slug_name to create the URL with full UUID
+                            const url = getSlugWithId(article.slug_name, article.id);
+                            navigateTo(`/learning/articles/${url}`);
+                          }}
                         >
                           <div className="flex flex-col md:flex-row">
                             <div className="md:w-80 h-48 md:h-auto bg-gray-100 overflow-hidden relative flex-shrink-0">
                               <ImageWithFallback
-                                src={article.thumbnail}
+                                src={article.banner_img || 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhcnRpY2xlJTIwYmxvZyUyMGNvbnRlbnQlMjBrbm93bGVkZ2V8ZW58MXx8fHwxNzU1ODU0Mjg2fDA&ixlib=rb-4.1.0&q=80&w=1080'}
                                 alt={article.title}
                                 className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                               />
-                              {article.featured && (
-                                <div className="absolute top-2 right-2">
-                                  <Badge
-                                    variant="secondary"
-                                    className="bg-yellow-100 text-yellow-800 border-yellow-200 text-xs"
-                                  >
-                                    Featured
-                                  </Badge>
-                                </div>
-                              )}
                             </div>
 
                             <div className="flex-1 p-6">
@@ -505,38 +594,39 @@ export function Articles() {
                                 <div className="flex-1">
                                   <div className="flex items-center gap-2 mb-2">
                                     <Badge variant="outline" className="text-small">
-                                      {article.category}
+                                      {article.content_category}
                                     </Badge>
-                                    <span className="text-small text-muted">{article.readTime}</span>
+                                    <span className="text-small text-muted">
-                                    <div className="flex items-center gap-1 text-small text-muted">
+                                      {calculateReadTime(article.content)}
-                                      <Eye className="w-3 h-3" />
+                                    </span>
-                                      <span>{article.views}</span>
-                                    </div>
                                   </div>
 
-                                  <h3 className="text-h4 mb-2 group-hover:text-blue-600 transition-colors">
+                                  <h3 className="text-h4 mb-2 group-hover:text-[#04045B] transition-colors">
                                     {article.title}
                                   </h3>
 
                                   <p className="text-body text-muted mb-3">
-                                    {article.excerpt}
+                                    {article.short_description || article.content.substring(0, 200) + '...'}
                                   </p>
 
                                   <div className="flex items-center justify-between">
-                                    <div className="flex items-center gap-2">
-                                      <ImageWithFallback
-                                        src={article.authorAvatar}
-                                        alt={article.author}
-                                        className="w-6 h-6 rounded-full object-cover"
-                                      />
-                                      <div>
-                                        <span className="text-small font-medium">{article.author}</span>
-                                        <span className="text-small text-muted ml-1">• {article.authorTitle}</span>
-                                      </div>
-                                    </div>
                                     <div className="text-small text-muted">
-                                      {formatDate(article.date)}
+                                      {formatDate(article.updated_at)}
                                     </div>
+
+                                    {/* Display tags if available */}
+                                    {article.blog_tags && article.blog_tags.length > 0 && (
+                                      <div className="flex flex-wrap gap-1">
+                                        {article.blog_tags.slice(0, 2).map((tag, idx) => (
+                                          <Badge key={idx} variant="secondary" className="text-xs">
+                                            {tag.tag_name}
+                                          </Badge>
+                                        ))}
+                                        {article.blog_tags.length > 2 && (
+                                          <span className="text-xs text-gray-500">+{article.blog_tags.length - 2}</span>
+                                        )}
+                                      </div>
+                                    )}
                                   </div>
                                 </div>
                               </div>
@@ -592,7 +682,7 @@ export function Articles() {
                                 containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
                               }}
                               className={`min-w-10 ${currentPage === page
-                                ? 'bg-blue-600 text-white hover:bg-blue-700'
+                                ? 'bg-[#04045B] text-white hover:bg-[#04045B]'
                                 : 'border-gray-300 text-gray-700 hover:bg-gray-50'
                                 }`}
                             >

src/components/BlogDetail.tsx

@@ -1,21 +1,16 @@
 import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Button } from './ui/button';
 import { Card, CardContent } from './ui/card';
 import { Badge } from './ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { navigateTo } from './Router';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { CTABannerSection } from './CTABannerSection';
 import { useCart } from './CartContext';
-// CRITICAL: Import articlesData from the centralized data file
-// DO NOT create a local articlesData variable - it will shadow this import
-// All article data must be maintained in /data/articlesData.ts
 import {
   Calendar,
   Clock,
-  ArrowRight,
   ChevronUp,
-  Share2,
   Bookmark,
   Twitter,
   Facebook,
@@ -24,188 +19,77 @@ import {
   Heart,
   Eye,
   BookOpen,
-  ArrowLeft,
+  ArrowLeft
-  Star,
-  MessageCircle,
-  Users,
-  TrendingUp,
-  Award
 } from 'lucide-react';
-import { articlesData } from '../data/articlesData';
+import { useGetBlogByIDQuery, useGetBlogsQuery } from '../redux/services/blogApi';
-import { useParams } from 'react-router-dom';
+import { FullScreenLoader } from './FullScreenLoader';
-
+import { extractIdFromSlug, extractSlugFromSlugAndId, getSlugWithId } from '../utils/urlHelpers';
-interface BlogPost {
-  id: string;
-  title: string;
-  slug: string;
-  excerpt: string;
-  content: string;
-  author: string;
-  authorBio: string;
-  authorImage: string;
-  publishedDate: string;
-  updatedDate?: string;
-  readTime: string;
-  views: number;
-  likes: number;
-  category: string;
-  tags: string[];
-  image: string;
-  featured: boolean;
-}
-
-interface RelatedPost {
-  id: string;
-  title: string;
-  slug: string;
-  excerpt: string;
-  author: string;
-  publishedDate: string;
-  readTime: string;
-  category: string;
-  image: string;
-}
 
 interface BlogDetailProps {
   params?: {
-    slug?: string;
+    slugAndId?: string;
   };
 }
 
-// NOTE: Using articlesData imported from '../data/articlesData' (line 10)
-// DO NOT create a local articlesData variable here as it will shadow the import
-
-// Function to get blog post by slug
-const getBlogPostBySlug = (slug: string): BlogPost => {
-  console.log('🔍 Searching for slug:', slug);
-  console.log('📋 Available slugs:', articlesData.map(a => ({ id: a.id, slug: a.slug })));
-  
-  const article = articlesData.find(article => article.slug === slug);
-  
-  if (!article) {
-    console.error('❌ Article not found. Available slugs:', articlesData.map(a => a.slug));
-    return {
-      id: 'not-found',
-      title: 'Article Not Found',
-      slug: 'not-found',
-      excerpt: `The requested article "${slug}" could not be found.`,
-      content: `
-        <p>We're sorry, but the article you're looking for could not be found. It may have been moved or removed.</p>
-        <p>Available articles:</p>
-        <ul>
-          ${articlesData.slice(0, 6).map(article => 
-            `<li><a href="/learning/articles/${article.slug}">${article.title}</a></li>`
-          ).join('')}
-        </ul>
-      `,
-      author: 'KLC Team',
-      authorBio: 'The Kautilya Leadership Center team',
-      authorImage: 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop',
-      publishedDate: '2024-01-01',
-      updatedDate: '2024-01-01',
-      readTime: '1 min read',
-      views: 0,
-      likes: 0,
-      category: 'General',
-      tags: [],
-      image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop',
-      featured: false
-    };
-  }
-  
-  console.log('✅ Article found:', article.title);
-  
-  return {
-    id: article.id,
-    title: article.title,
-    slug: article.slug,
-    excerpt: article.excerpt || '',
-    content: article.content || '',
-    author: article.author || 'Unknown Author',
-    authorBio: article.authorBio || `${article.author} is a contributor to Kautilya Leadership Center.`,
-    authorImage: article.authorAvatar || 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop',
-    publishedDate: article.date || '2024-01-01',
-    updatedDate: article.date || '2024-01-01',
-    readTime: article.readTime || '5 min read',
-    views: parseInt((article.views || '0').replace('k', '00').replace('.', '')) || 0,
-    likes: article.likes || 0,
-    category: article.category || 'General',
-    tags: article.tags || [],
-    image: article.thumbnail || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop',
-    featured: article.featured || false
-  };
-};
-
-// Generate related posts dynamically from articlesData
-const getRelatedPosts = (currentSlug: string, currentCategory: string): RelatedPost[] => {
-  // Filter articles by same category or exclude current article
-  const related = articlesData
-    .filter(article => article.slug !== currentSlug)
-    .slice(0, 3)
-    .map(article => ({
-      id: article.id,
-      title: article.title,
-      slug: article.slug,
-      excerpt: article.excerpt,
-      author: article.author,
-      publishedDate: article.date,
-      readTime: article.readTime,
-      category: article.category,
-      image: article.thumbnail
-    }));
-  
-  return related;
-};
-
-const relatedPosts: RelatedPost[] = [
-  {
-    id: '5',
-    title: 'A New Lens on Leadership',
-    slug: 'new-lens-on-leadership',
-    excerpt: 'Your leadership calls, and how you interpret opportunities and threats, are influenced by your lenses, which are unique and personal to you.',
-    author: 'K Ramkumar',
-    publishedDate: '2016-08-16',
-    readTime: '12 min read',
-    category: 'Leadership Philosophy',
-    image: 'https://images.unsplash.com/photo-1560550900-5c10828c40aa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsZWFkZXJzaGlwJTIwbGVucyUyMHBlcnNwZWN0aXZlfGVufDF8fHx8MTc1OTk5NTg0N3ww&ixlib=rb-4.1.0&q=80&w=400'
-  },
-  {
-    id: '2',
-    title: 'Inspiration – the magic potion to leadership',
-    slug: 'inspiration-magic-potion-leadership',
-    excerpt: 'Explore how inspiration serves as a fundamental catalyst for effective leadership, transforming both leaders and their teams toward extraordinary achievements.',
-    author: 'Ramkumar Krishnaswamy',
-    publishedDate: '2017-10-13',
-    readTime: '7 min read',
-    category: 'Leadership Philosophy',
-    image: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=400&h=300&fit=crop'
-  },
-  {
-    id: '3',
-    title: 'Lessons on Leadership Paradox',
-    slug: 'lessons-leadership-paradox',
-    excerpt: 'Uncover the inherent paradoxes in leadership and learn how embracing these contradictions can make you a more effective and authentic leader.',
-    author: 'Ramkumar Krishnaswamy',
-    publishedDate: '2017-08-10',
-    readTime: '7 min read',
-    category: 'Leadership Strategy',
-    image: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop'
-  }
-];
-
 export function BlogDetail({ params }: BlogDetailProps) {
- const { slug } = useParams<{ slug: string }>();
+  const { slugAndId } = useParams<{ slugAndId: string }>();
+  const navigate = useNavigate();
   const [scrollProgress, setScrollProgress] = useState(0);
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [isLiked, setIsLiked] = useState(false);
   const [isBookmarked, setIsBookmarked] = useState(false);
   const { addToCart } = useCart();
 
-  // Get blog post data based on slug
+  // Extract full ID from URL using the new function
-  const blogPost = getBlogPostBySlug(slug || "");
+  const fullId = slugAndId ? extractIdFromSlug(slugAndId) : null;
+  const urlSlug = slugAndId ? extractSlugFromSlugAndId(slugAndId) : '';
+
+  // Fetch blog details by ID directly - no dependency on list API
+  const {
+    data: blogPost,
+    isLoading: isLoadingBlog,
+    isError: isBlogError,
+    refetch: refetchBlog
+  } = useGetBlogByIDQuery(fullId as string, {
+    skip: !fullId,
+    refetchOnMountOrArgChange: true,
+  });
+
+  // Fetch related blogs (excluding current blog)
+  const {
+    data: relatedBlogsData,
+    isLoading: isLoadingRelated
+  } = useGetBlogsQuery({
+    limit: 3,
+    offset: 0,
+    content_status: 'publish',
+    content_type: 'BLOG',
+  }, {
+    skip: !fullId,
+  });
+
+  // SEO: Check if URL slug matches the actual slug_name and redirect if needed
+  useEffect(() => {
+    if (blogPost && fullId) {
+      // Get the expected slug from the blog post
+      const expectedSlug = blogPost.slug_name;
+      // Create the expected URL with proper formatting
+      const expectedUrl = getSlugWithId(expectedSlug, fullId);
+      // Get the current URL slug
+      const currentSlugAndId = slugAndId || '';
+
+      // Compare (case-insensitive)
+      if (currentSlugAndId.toLowerCase() !== expectedUrl.toLowerCase()) {
+        // Redirect to the correct URL
+        navigate(`/learning/articles/${expectedUrl}`, { replace: true });
+      }
+    }
+  }, [blogPost, fullId, slugAndId, navigate]);
 
   useEffect(() => {
+    if (blogPost?.title) {
       document.title = `${blogPost.title} | KLC Blog`;
+    }
     window.scrollTo(0, 0);
 
     const handleScroll = () => {
@@ -219,7 +103,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
 
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
-  }, [blogPost.title]);
+  }, [blogPost?.title]);
 
   const formatDate = (dateString: string) => {
     return new Date(dateString).toLocaleDateString('en-US', {
@@ -231,7 +115,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
 
   const handleShare = (platform: string) => {
     const url = window.location.href;
-    const title = blogPost.title;
+    const title = blogPost?.title || '';
 
     const shareUrls = {
       twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
@@ -252,6 +136,64 @@ export function BlogDetail({ params }: BlogDetailProps) {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  // Calculate read time based on content length (approx)
+  const calculateReadTime = (content: string): string => {
+    const wordsPerMinute = 200;
+    const wordCount = content.split(/\s+/).length;
+    const minutes = Math.ceil(wordCount / wordsPerMinute);
+    return `${minutes} min read`;
+  };
+
+  // Filter related blogs (exclude current blog)
+  const relatedPosts = relatedBlogsData?.data?.items
+    ?.filter((blog: any) => blog.id !== fullId)
+    .map((blog: any) => ({
+      id: blog.id,
+      title: blog.title,
+      slug: blog.slug_name,
+      excerpt: blog.short_description || blog.content.substring(0, 150) + '...',
+      author: blog.author_name || 'KLC Team',
+      publishedDate: blog.updated_at,
+      readTime: calculateReadTime(blog.content),
+      category: blog.content_category,
+      image: blog.banner_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop'
+    })) || [];
+
+  // Handle related post click - use full UUID
+  const handleRelatedPostClick = (postSlug: string, postId: string) => {
+    const url = getSlugWithId(postSlug, postId);
+    navigate(`/learning/articles/${url}`);
+  };
+
+  // Handle loading state
+  if (isLoadingBlog) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <FullScreenLoader text="Loading article..." />
+      </div>
+    );
+  }
+
+  // Handle error state
+  if (isBlogError || !blogPost) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-white">
+        <div className="text-center max-w-md px-4">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <BookOpen className="w-8 h-8 text-red-600" />
+          </div>
+          <h2 className="text-h3 mb-2">Article Not Found</h2>
+          <p className="text-gray-600 mb-6">
+            The article you're looking for could not be found. It may have been moved or removed.
+          </p>
+          <Button onClick={() => navigate('/learning/articles')}>
+            Back to Articles
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
       {/* Scroll Progress Bar */}
@@ -287,7 +229,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
             <Button
               variant="ghost"
               size="sm"
-              onClick={() => navigateTo('/learning/articles')}
+              onClick={() => navigate('/learning/articles')}
               className="p-0 h-auto font-medium hover:bg-transparent transition-colors"
               style={{ color: '#6F6F6F' }}
             >
@@ -295,7 +237,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
               Back to Articles
             </Button>
             <span className="text-[#E5E7EB]">•</span>
-            <span>{blogPost.category}</span>
+            <span>{blogPost.content_category || 'Article'}</span>
           </div>
         </div>
 
@@ -314,7 +256,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
                     color: '#04045B'
                   }}
                 >
-                  {blogPost.category}
+                  {blogPost.content_category || 'Article'}
                 </Badge>
 
                 {/* Improved Typography Hierarchy */}
@@ -325,7 +267,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
                 {/* Constrained Width Excerpt for Better Readability */}
                 <div className="max-w-3xl">
                   <p className="text-body-lg leading-relaxed" style={{ color: '#6F6F6F' }}>
-                    {blogPost.excerpt}
+                    {blogPost.short_description || blogPost.content.substring(0, 200) + '...'}
                   </p>
                 </div>
               </div>
@@ -338,33 +280,33 @@ export function BlogDetail({ params }: BlogDetailProps) {
                 {/* Author Info with Improved Layout */}
                 <div className="flex items-center gap-4">
                   <Avatar className="w-14 h-14 ring-2 ring-white shadow-md">
-                    <AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
+                    <AvatarImage src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop" alt="Author" />
-                    <AvatarFallback className="text-subhead font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
+                    <AvatarFallback className="text-subhead font-medium">KLC</AvatarFallback>
                   </Avatar>
                   <div>
                     <div className="text-subhead font-medium mb-1" style={{ color: '#26231A' }}>
-                      {blogPost.author}
+                      KLC Team
                     </div>
 
                     {/* Cleaner Meta Information with Subtle Dividers */}
                     <div className="flex items-center gap-4 text-small" style={{ color: '#6F6F6F' }}>
                       <span className="flex items-center gap-1.5">
                         <Calendar className="w-4 h-4" />
-                        {formatDate(blogPost.publishedDate)}
+                        {formatDate(blogPost.updated_at || new Date().toISOString())}
                       </span>
 
                       <div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
 
                       <span className="flex items-center gap-1.5">
                         <Clock className="w-4 h-4" />
-                        {blogPost.readTime}
+                        {calculateReadTime(blogPost.content)}
                       </span>
 
                       <div className="w-1 h-1 rounded-full" style={{ backgroundColor: '#E5E7EB' }}></div>
 
                       <span className="flex items-center gap-1.5">
                         <Eye className="w-4 h-4" />
-                        {blogPost.views.toLocaleString()}
+                        0
                       </span>
                     </div>
                   </div>
@@ -379,7 +321,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
                     className={`transition-colors ${isLiked ? 'text-red-500' : 'text-[#6F6F6F]'}`}
                   >
                     <Heart className={`w-4 h-4 mr-2 ${isLiked ? 'fill-current' : ''}`} />
-                    {blogPost.likes + (isLiked ? 1 : 0)}
+                    0
                   </Button>
 
                   <Button
@@ -409,7 +351,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
               {/* Featured Image with Better Aspect Ratio */}
               <div className="aspect-[16/9] rounded-xl overflow-hidden mt-8 shadow-lg">
                 <ImageWithFallback
-                  src={blogPost.image}
+                  src={blogPost.banner_img || 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop'}
                   alt={blogPost.title}
                   className="w-full h-full object-cover"
                 />
@@ -447,21 +389,22 @@ export function BlogDetail({ params }: BlogDetailProps) {
                     fontFamily: 'var(--font-family-base)',
                     color: '#26231A',
                     width: '100%'
-                  }}
+                  } as React.CSSProperties}
                   dangerouslySetInnerHTML={{ __html: blogPost.content }}
                 />
               </div>
             </article>
 
             {/* Enhanced Tag Pills with Hover States */}
+            {blogPost.blog_tags && blogPost.blog_tags.length > 0 && (
               <div className="mb-16">
                 <h3 className="text-subhead mb-6 font-medium" style={{ color: '#26231A' }}>
                   Topics covered in this article
                 </h3>
                 <div className="flex flex-wrap gap-3">
-                {blogPost.tags.map((tag) => (
+                  {blogPost.blog_tags.map((tag: any) => (
                     <Badge
-                    key={tag} 
+                      key={tag.tag_name}
                       className="transition-all duration-200 text-body px-4 py-2 font-medium"
                       style={{
                         backgroundColor: 'rgba(4, 4, 91, 0.08)',
@@ -469,26 +412,27 @@ export function BlogDetail({ params }: BlogDetailProps) {
                         border: '1px solid rgba(4, 4, 91, 0.15)'
                       }}
                     >
-                    {tag}
+                      {tag.tag_name}
                     </Badge>
                   ))}
                 </div>
               </div>
+            )}
 
             {/* Enhanced Author Bio Card */}
             <Card className="mb-16 shadow-md border-0" style={{ backgroundColor: '#FFFFFF' }}>
               <CardContent className="p-8">
                 <div className="flex items-start gap-6">
                   <Avatar className="w-20 h-20 ring-4 ring-white shadow-lg">
-                    <AvatarImage src={blogPost.authorImage} alt={blogPost.author} />
+                    <AvatarImage src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop" alt="Author" />
-                    <AvatarFallback className="text-lg font-medium">{blogPost.author.split(' ').map(n => n[0]).join('')}</AvatarFallback>
+                    <AvatarFallback className="text-lg font-medium">KLC</AvatarFallback>
                   </Avatar>
                   <div className="flex-1">
                     <h4 className="text-h4 mb-3 font-semibold" style={{ color: '#26231A' }}>
-                      About {blogPost.author}
+                      About KLC Team
                     </h4>
                     <p className="text-body leading-relaxed mb-6" style={{ color: '#6F6F6F' }}>
-                      {blogPost.authorBio}
+                      The Kautilya Leadership Center team is dedicated to providing cutting-edge insights and research on leadership development, management strategies, and organizational excellence.
                     </p>
                   </div>
                 </div>
@@ -498,6 +442,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
         </div>
 
         {/* Related Articles Section with Balanced Grid Layout */}
+        {relatedPosts.length > 0 && (
           <section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}>
             <div className="section-margin-x">
               <div className="max-w-6xl mx-auto">
@@ -516,11 +461,15 @@ export function BlogDetail({ params }: BlogDetailProps) {
 
                 {/* Balanced Card Grid with Equal Spacing */}
                 <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                {relatedPosts.map((post) => (
+                  {relatedPosts.map((post: any) => (
                     <Card
                       key={post.id}
                       className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group border-0"
-                    onClick={() => navigateTo(`/learning/articles/${post.slug}`)}
+                      onClick={() => {
+                        // Use the same pattern as the main articles with full UUID
+                        const url = getSlugWithId(post.slug, post.id);
+                        navigate(`/learning/articles/${url}`);
+                      }}
                       style={{ backgroundColor: '#FFFFFF' }}
                     >
                       <div className="aspect-[16/10] w-full bg-gray-100 overflow-hidden relative">
@@ -587,6 +536,7 @@ export function BlogDetail({ params }: BlogDetailProps) {
               </div>
             </div>
           </section>
+        )}
 
         {/* CTA Section */}
         <CTABannerSection />

src/components/CTABannerSection.tsx

@@ -4,14 +4,45 @@ import { BrandedTag } from "./about/BrandedTag";
 import { PrimaryCTAButton } from "./PrimaryCTAButton";
 import { navigateTo } from "./Router";
 
-export function CTABannerSection() {
+interface CTABannerSectionProps {
+  ctaBands?: Array<{
+    id: string;
+    background_image_url: string;
+    background_image_alt_text: string;
+    text: string;
+    cta_text: string;
+    cta_destination: string;
+  }>;
+  isLoading?: boolean;
+}
+
+export function CTABannerSection({ ctaBands = [], isLoading }: CTABannerSectionProps) {
+  // Get the first CTA band or use default values
+  const ctaBand = ctaBands && ctaBands.length > 0 ? ctaBands[0] : null;
+
+  if (isLoading) {
+    return (
+      <section className="relative h-[700px] overflow-hidden bg-gray-100 animate-pulse">
+        <div className="absolute inset-0 bg-gray-200" />
+        <div className="relative h-full flex items-center justify-end section-margin-x">
+          <div className="bg-gray-300 rounded-lg p-16 max-w-2xl w-full h-96" />
+        </div>
+      </section>
+    );
+  }
+
+  // If no CTA band is available, don't render anything
+  if (!ctaBand) {
+    return null;
+  }
+
   return (
     <section className="relative h-[700px] overflow-hidden">
       {/* Background Image */}
       <div className="absolute inset-0">
         <ImageWithFallback
-          src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"
+          src={ctaBand.background_image_url || "https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80"}
-          alt="Professional team collaborating in modern office"
+          alt={ctaBand.background_image_alt_text || "Professional team collaborating in modern office"}
           className="w-full h-full object-cover"
         />
         
@@ -34,11 +65,11 @@ export function CTABannerSection() {
           {/* Branded Tag */}
           <BrandedTag text="Next Steps" variant="white" />
 
-          {/* Main Headline */}
+          {/* Main Headline - Use API text or fallback */}
           <h2 
             className="text-h2-white mb-8"
           >
-            Ready to transform your leadership? 
+            {ctaBand.text || "Ready to transform your leadership?"}
             <span 
               className="italic"
               style={{ color: 'var(--color-brand-accent)' }}
@@ -48,10 +79,10 @@ export function CTABannerSection() {
             to start your development journey now.
           </h2>
 
-          {/* CTA Button - Updated to redirect to contact page */}
+          {/* CTA Button */}
           <PrimaryCTAButton 
-            text="Schedule a Consultation"
+            text={ctaBand.cta_text || "Schedule a Consultation"}
-            onClick={() => navigateTo('/contact?topic=consulting')}
+            onClick={() => navigateTo(ctaBand.cta_destination || '/contact?topic=consulting')}
             ariaLabel="Schedule a consultation with our leadership experts"
             className="cta-banner-yellow"
           />

src/components/Contact.tsx

@@ -9,6 +9,7 @@ import { PrimaryCTAButton } from './PrimaryCTAButton';
 import { ImageWithFallback } from './figma/ImageWithFallback';
 import { navigateTo } from './Router';
 import kautilyabg from '../assets/Kautilya.png';
+import { useCreateLeadMutation, useGetLeadCategoriesQuery } from '../redux/services/contactUsApi';
 
 interface ContactProps {
   topic?: string;
@@ -19,13 +20,23 @@ export function Contact({ topic }: ContactProps) {
     name: '',
     mobileNumber: '',
     emailId: '',
-    interestedIn: topic || '',
+    interestedIn: '',
     message: ''
   });
 
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const { data: categoryData } = useGetLeadCategoriesQuery({
+    limit: 20,
+    offset: 0,
+    status: "active"
+  });
+
+  const categories = categoryData?.data?.items || [];
+
+  const [createLead] = useCreateLeadMutation();
+
   useEffect(() => {
     console.log('Contact component mounted with topic:', topic);
     // Set default interested in based on topic parameter
@@ -65,10 +76,22 @@ export function Contact({ topic }: ContactProps) {
     e.preventDefault();
     setIsSubmitting(true);
 
-    // Simulate form submission
+    try {
-    await new Promise(resolve => setTimeout(resolve, 2000));
+      await createLead({
+        full_name: formData.name,
+        phone_number: formData.mobileNumber,
+        email_address: formData.emailId,
+        lead_category_xid: formData.interestedIn,
+        message: formData.message,
+        lead_status: "NEW"
+      }).unwrap();
 
       setIsSubmitted(true);
+
+    } catch (error) {
+      console.error("Lead creation failed", error);
+    }
+
     setIsSubmitting(false);
   };
 
@@ -80,11 +103,15 @@ export function Contact({ topic }: ContactProps) {
             <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
               <CheckCircle2 className="w-10 h-10 text-green-600" />
             </div>
+
             <h1 className="text-h2 mb-4">Thank You!</h1>
+
             <p className="text-body-lg text-muted mb-8">
               We've received your message and will get back to you within 24 hours.
               Our leadership development experts are excited to help transform your organization.
             </p>
+
+            <div className="flex justify-center">
               <PrimaryCTAButton
                 text="Return to Home"
                 onClick={() => navigateTo('/')}
@@ -93,6 +120,7 @@ export function Contact({ topic }: ContactProps) {
             </div>
           </div>
         </div>
+      </div>
     );
   }
 
@@ -355,14 +383,13 @@ export function Contact({ topic }: ContactProps) {
                           <SelectValue placeholder="Select your area of interest" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="Leadership Development">Leadership Development</SelectItem>
+                          <SelectContent>
-                          <SelectItem value="Executive Coaching">Executive Coaching</SelectItem>
+                            {categories.map((cat: any) => (
-                          <SelectItem value="Management Development">Management Development</SelectItem>
+                              <SelectItem key={cat.id} value={cat.id}>
-                          <SelectItem value="Culture Competence">Culture Competence</SelectItem>
+                                {cat.category_type}
-                          <SelectItem value="Consulting Services">Consulting Services</SelectItem>
+                              </SelectItem>
-                          <SelectItem value="Learning Facility">Learning Facility</SelectItem>
+                            ))}
-                          <SelectItem value="Online Courses">Online Courses</SelectItem>
+                          </SelectContent>
-                          <SelectItem value="General Inquiry">General Inquiry</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -392,7 +419,7 @@ export function Contact({ topic }: ContactProps) {
                         </div>
                         <PrimaryCTAButton
                           text={isSubmitting ? "Sending Message..." : "Send Message"}
-                          onClick={() => {}}
+                          onClick={() => { handleSubmit }}
                           ariaLabel="Send contact message"
                           className="w-full sm:w-auto"
                         />

src/components/FooterNew.tsx

@@ -72,7 +72,7 @@ export function FooterNew() {
                                     About Us
                                 </button>
                                 <button
-                                    onClick={() => navigateTo('/learning/blogs')}
+                                    onClick={() => navigateTo('/learning/articles')}
                                     className="block text-small-white transition-all duration-300 text-left"
                                     style={{
                                         color: 'white',

src/components/FullScreenLoader.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Loader } from "./Loader";
+
+interface FullScreenLoaderProps {
+  text?: string;
+}
+
+export const FullScreenLoader: React.FC<FullScreenLoaderProps> = ({
+  text = "Loading...",
+}) => {
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-white/100 z-[9999]">
+      <Loader />
+
+      {text && (
+        <p className="mt-6 text-lg text-gray-600">
+          {text}
+        </p>
+      )}
+    </div>
+  );
+};

src/components/HeroSection.tsx

@@ -1,11 +1,19 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from "react";
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from "lucide-react";
-import { navigateTo } from './Router';
+import { navigateTo } from "./Router";
-import svgPaths from "../imports/svg-i1joeov37f";
+import PrimaryCTAButton from "./PrimaryCTAButton";
-import PrimaryCTAButton from './PrimaryCTAButton';
+
+interface HeroSectionItem {
+  id: string;
+  headline: string;
+  subtext: string;
+  background_image_url: string;
+  cta_text: string;
+  cta_destination: string;
+}
 
 interface SlideData {
-  id: number;
+  id: string;
   title: string;
   backgroundImage: string;
   shortTitle: string;
@@ -13,68 +21,42 @@ interface SlideData {
   route: string;
 }
 
-export default function HeroSection() {
+interface HeroSectionProps {
-  const [currentSlide, setCurrentSlide] = useState(0);
+  heroSections: HeroSectionItem[];
-  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+  isLoading: boolean;
-  const [progressValues, setProgressValues] = useState([0, 0, 0, 0, 0, 0]);
+}
 
-  const slides: SlideData[] = [
+export default function HeroSection({
-    {
+  heroSections,
-      id: 1,
+  isLoading,
-      title: "Know Your Leaders. Strengthen Your Pipeline.",
+}: HeroSectionProps) {
-      backgroundImage: "https://images.unsplash.com/photo-1697059361419-349e924ed363?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnMlMjBzdHJhdGVneSUyMG1lZXRpbmd8ZW58MXx8fHwxNzU2ODA3Mjc0fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+  const slides: SlideData[] = heroSections.map((item) => ({
-      shortTitle: "Leadership Pipeline Development",
+    id: item.id,
-      ctaText: "Discover Our Assessment Solutions",
+    title: item.headline,
-      route: '/services/leadership-pipeline-development'
+    backgroundImage: item.background_image_url,
-    },
+    shortTitle: item.subtext,
-    {
+    ctaText: item.cta_text,
-      id: 2,
+    route: item.cta_destination,
-      title: "Build Leaders Who Drive Business Growth",
+  }));
-      backgroundImage: "https://images.unsplash.com/photo-1705234384669-c6d31c61b789?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBsZWFkZXJzaGlwJTIwZGV2ZWxvcG1lbnQlMjB0cmFpbmluZ3xlbnwxfHx8fDE3NTY4MDcyNjJ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-      shortTitle: "Leadership Development",
-      ctaText: "Explore Leadership Journeys",
-      route: '/services/leadership-development'
-    },
-    {
-      id: 3,
-      title: "Strengthen the Backbone: Your Managers",
-      backgroundImage: "https://images.unsplash.com/photo-1565688527174-775059ac429c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYW5hZ2VtZW50JTIwdGVhbSUyMGRpc2N1c3Npb24lMjBvZmZpY2V8ZW58MXx8fHwxNzU2ODA2ODg1fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-      shortTitle: "Management Development",
-      ctaText: "Strengthen your Managerial Calibre",
-      route: '/services/management-development'
-    },
-    {
-      id: 4,
-      title: "Shape Cultures That Accelerate Performance",
-      backgroundImage: "https://images.unsplash.com/photo-1531535807748-218331acbcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBjdWx0dXJlJTIwdGVhbSUyMGNvbGxhYm9yYXRpb258ZW58MXx8fHwxNzU2ODA2ODg5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-      shortTitle: "Culture & Competence Consulting",
-      ctaText: "Learn how we facilitate Change",
-      route: '/services/culture-competence'
-    },
-    {
-      id: 5,
-      title: "Unlock Leadership Potential",
-      backgroundImage: "https://images.unsplash.com/photo-1714974528833-a10e19a8f951?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBjb2FjaGluZyUyMG1lbnRvciUyMGNvbnZlcnNhdGlvbnxlbnwxfHx8fDE3NTY4MDY4OTR8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-      shortTitle: "Coaching & Mentoring",
-      ctaText: "Start a Coaching Conversation",
-      route: '/services/executive-coaching'
-    },
-    {
-      id: 6,
-      title: "Experience Learning in a World-Class Environment",
-      backgroundImage: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb25mZXJlbmNlJTIwY2VudGVyJTIwbGVhcm5pbmclMjBmYWNpbGl0eXxlbnwxfHx8fDE3NTY4MDc0MDB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
-      shortTitle: "Learning Facility",
-      ctaText: "Explore Our Learning Facility",
-      route: '/services/learning-facility'
-    }
-  ];
 
   const totalSlides = slides.length;
-  const slideDuration = 5000; // 5 seconds per slide
 
-  // Auto-advance slides
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isAutoPlaying, setIsAutoPlaying] = useState(true);
+  const [progressValues, setProgressValues] = useState<number[]>([]);
+
+  const slideDuration = 5000;
+
+  /* Initialize progress array when slides load */
   useEffect(() => {
-    if (!isAutoPlaying) return;
+    if (totalSlides > 0) {
+      setProgressValues(new Array(totalSlides).fill(0));
+    }
+  }, [totalSlides]);
+
+  /* Auto slide */
+  useEffect(() => {
+    if (!isAutoPlaying || totalSlides === 0) return;
 
     const interval = setInterval(() => {
       setCurrentSlide((prev) => (prev + 1) % totalSlides);
@@ -83,48 +65,50 @@ export default function HeroSection() {
     return () => clearInterval(interval);
   }, [isAutoPlaying, totalSlides]);
 
-  // Progress bar animation
+  /* Progress animation */
   useEffect(() => {
-    if (!isAutoPlaying) return;
+    if (!isAutoPlaying || totalSlides === 0) return;
 
     const interval = setInterval(() => {
-      setProgressValues(prev => {
+      setProgressValues((prev) => {
         const newProgress = [...prev];
-        newProgress[currentSlide] = Math.min(newProgress[currentSlide] + (100 / (slideDuration / 100)), 100);
+
-        // Reset progress when slide changes
+        newProgress[currentSlide] = Math.min(
+          newProgress[currentSlide] + 100 / (slideDuration / 100),
+          100
+        );
+
         if (newProgress[currentSlide] >= 100) {
           newProgress[currentSlide] = 0;
-          // Reset other slides
+
           newProgress.forEach((_, index) => {
-            if (index !== currentSlide) {
+            if (index !== currentSlide) newProgress[index] = 0;
-              newProgress[index] = 0;
-            }
           });
         }
+
         return newProgress;
       });
     }, 100);
 
     return () => clearInterval(interval);
-  }, [currentSlide, isAutoPlaying]);
+  }, [currentSlide, isAutoPlaying, totalSlides]);
 
-  // Reset progress when manually changing slides
+  /* Reset progress when slide changes */
   useEffect(() => {
-    setProgressValues(prev => {
+    setProgressValues(new Array(totalSlides).fill(0));
-      const newProgress = [0, 0, 0, 0, 0, 0];
+  }, [currentSlide, totalSlides]);
-      newProgress[currentSlide] = 0;
-      return newProgress;
-    });
-  }, [currentSlide]);
 
-  const goToSlide = useCallback((slideIndex: number) => {
+  const goToSlide = useCallback(
+    (slideIndex: number) => {
       if (slideIndex !== currentSlide) {
         setCurrentSlide(slideIndex);
         setIsAutoPlaying(false);
-      // Resume auto-play after manual interaction
+
         setTimeout(() => setIsAutoPlaying(true), 3000);
       }
-  }, [currentSlide]);
+    },
+    [currentSlide]
+  );
 
   const nextSlide = useCallback(() => {
     const next = (currentSlide + 1) % totalSlides;
@@ -136,10 +120,11 @@ export default function HeroSection() {
     goToSlide(prev);
   }, [currentSlide, totalSlides, goToSlide]);
 
-  // Pause auto-play on hover
   const handleMouseEnter = () => setIsAutoPlaying(false);
   const handleMouseLeave = () => setIsAutoPlaying(true);
 
+  if (isLoading || slides.length === 0) return null;
+
   return (
     <section
       className="hero-section"
@@ -150,9 +135,9 @@ export default function HeroSection() {
       {slides.map((slide, index) => (
         <div
           key={slide.id}
-          className={`hero-slide ${index === currentSlide ? 'active' : ''}`}
+          className={`hero-slide ${index === currentSlide ? "active" : ""}`}
           style={{
-            backgroundImage: `url('${slide.backgroundImage}')`
+            backgroundImage: `url('${slide.backgroundImage}')`,
           }}
         >
           <div className="hero-overlay" />
@@ -162,13 +147,10 @@ export default function HeroSection() {
       {/* Hero Content */}
       <div className="hero-content">
         <div className="hero-text-section">
-          {/* Title */}
+          <h1 className="hero-title" style={{ whiteSpace: "pre-line" }}>
-          <h1 className="hero-title" style={{ whiteSpace: 'pre-line' }}>
             {slides[currentSlide].title}
           </h1>
 
-          {/* Dynamic CTA Button - Enhanced with Proper Navigation */}
-
           <PrimaryCTAButton
             text={slides[currentSlide].ctaText}
             onClick={() => navigateTo(slides[currentSlide].route)}
@@ -177,10 +159,8 @@ export default function HeroSection() {
         </div>
       </div>
 
-
       {/* Bottom Navigation */}
       <div className="hero-navigation">
-        {/* Progress Section */}
         <div className="hero-progress-container">
           {slides.map((slide, index) => (
             <div
@@ -188,35 +168,41 @@ export default function HeroSection() {
               className="hero-progress-item"
               onClick={() => goToSlide(index)}
             >
-              {/* Progress Bar */}
               <div
-                key={slide.id}
+                className={`hero-progress-segment ${
-                className="hero-progress-item"
+                  index === currentSlide ? "active" : ""
-                onClick={() => navigateTo(slide.route)}
+                }`}
               >
-                {/* Progress Bar */}
-                <div className={`hero-progress-segment ${index === currentSlide ? 'active' : ''}`}>
                 <div
                   className="hero-progress-fill"
-                    style={{ width: index === currentSlide ? `${progressValues[index]}%` : '0%' }}
+                  style={{
+                    width:
+                      index === currentSlide
+                        ? `${progressValues[index] ?? 0}%`
+                        : "0%",
+                  }}
                 />
               </div>
 
-                {/* Progress Number */}
+              <div
-                <div className={`hero-progress-number ${index === currentSlide ? 'active' : ''}`}>
+                className={`hero-progress-number ${
-                  {String(index + 1).padStart(2, '0')}
+                  index === currentSlide ? "active" : ""
+                }`}
+              >
+                {String(index + 1).padStart(2, "0")}
               </div>
 
-                {/* Progress Text */}
+              <div
-                <div className={`hero-progress-text ${index === currentSlide ? 'active' : ''}`}>
+                className={`hero-progress-text ${
+                  index === currentSlide ? "active" : ""
+                }`}
+              >
                 {slide.shortTitle}
               </div>
             </div>
-            </div>
           ))}
         </div>
 
-        {/* Navigation Arrows */}
         <div className="hero-controls">
           <button
             className="hero-nav-button"
@@ -225,6 +211,7 @@ export default function HeroSection() {
           >
             <ChevronLeft className="w-5 h-5" />
           </button>
+
           <button
             className="hero-nav-button"
             onClick={nextSlide}

src/components/LearningFacilityNew.tsx

@@ -66,6 +66,7 @@ import privateSpaceImage from '../assets/private-space.jpg';
 import executiveBoardroomImage from '../assets/exe-boardroom.jpg';
 import morningReflectionImage from '../assets/morning.jpg';
 import campusArialViewImage from '../assets/campus-arial-view.jpg';
+import { VirtualTour360 } from './VirtualTour360';
 
 const facilityFeatures = [
   {
@@ -345,6 +346,7 @@ export function LearningFacilityNew() {
   const maxSlide = Math.max(0, facilityFeatures.length - cardsPerView);
   const maxTourSlide = Math.max(0, virtualTourStops.length - tourCardsPerView);
 
+
   // Handle window resize
   useEffect(() => {
     const handleResize = () => {
@@ -419,11 +421,6 @@ export function LearningFacilityNew() {
     return () => clearInterval(interval);
   }, [heroBackgroundImages.length]);
 
-  const handleStartTour = () => {
-    setIsVirtualTourActive(true);
-    setCurrentTourStop(0);
-  };
-
   const handleNextStop = () => {
     if (currentTourStop < virtualTourStops.length - 1) {
       setCurrentTourStop(currentTourStop + 1);
@@ -451,6 +448,11 @@ export function LearningFacilityNew() {
     setSelectedFacility(null);
   };
 
+  const [isVirtualTourOpen, setIsVirtualTourOpen] = useState(false);
+  const handleStartTour = () => {
+    setIsVirtualTourOpen(true);
+  };
+
   return (
     <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
 
@@ -1766,6 +1768,16 @@ export function LearningFacilityNew() {
         onClose={handleCloseModal}
       />
 
+      {/* Virtual Tour Modal */}
+      <VirtualTour360
+        isOpen={isVirtualTourOpen}
+        onClose={() => setIsVirtualTourOpen(false)}
+        onBookNow={() => {
+          // Optional: auto-open booking modal after tour
+          handleBookNow();
+        }}
+      />
+
       {/* CTA Section - Using standardized home page CTA */}
       <CTABannerSection />
 

src/components/Loader.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+
+interface LoaderProps {
+    className?: string;
+}
+
+export const Loader: React.FC<LoaderProps> = ({ className = "" }) => {
+    return (
+        <>
+            <style>{`
+        .pl {
+          width: 8em;
+          height: 8em;
+        }
+
+        .pl circle {
+          transform-box: fill-box;
+          transform-origin: 50% 50%;
+        }
+
+        .pl__ring2 {
+          animation: ring2_ 4s 0.04s ease-in-out infinite;
+        }
+
+        .pl__ring4 {
+          animation: ring4_ 4s 0.12s ease-in-out infinite;
+        }
+
+        .pl__ring6 {
+          animation: ring6_ 4s 0.2s ease-in-out infinite;
+        }
+
+        @keyframes ring2_ {
+          from {
+            stroke-dashoffset: -329.207488554;
+            transform: rotate(-0.25turn);
+            animation-timing-function: ease-in;
+          }
+          23% {
+            stroke-dashoffset: -82.46680575;
+            transform: rotate(1turn);
+            animation-timing-function: ease-out;
+          }
+          46%, 50% {
+            stroke-dashoffset: -329.207488554;
+            transform: rotate(2.25turn);
+            animation-timing-function: ease-in;
+          }
+          73% {
+            stroke-dashoffset: -82.46680575;
+            transform: rotate(3.5turn);
+            animation-timing-function: ease-out;
+          }
+          96%, to {
+            stroke-dashoffset: -329.207488554;
+            transform: rotate(4.75turn);
+          }
+        }
+
+        @keyframes ring4_ {
+          from {
+            stroke-dashoffset: -253.9600625988;
+            transform: rotate(-0.25turn);
+            animation-timing-function: ease-in;
+          }
+          23% {
+            stroke-dashoffset: -63.61725015;
+            transform: rotate(1turn);
+            animation-timing-function: ease-out;
+          }
+          46%, 50% {
+            stroke-dashoffset: -253.9600625988;
+            transform: rotate(2.25turn);
+            animation-timing-function: ease-in;
+          }
+          73% {
+            stroke-dashoffset: -63.61725015;
+            transform: rotate(3.5turn);
+            animation-timing-function: ease-out;
+          }
+          96%, to {
+            stroke-dashoffset: -253.9600625988;
+            transform: rotate(4.75turn);
+          }
+        }
+
+        @keyframes ring6_ {
+          from {
+            stroke-dashoffset: -203.795111962;
+            transform: rotate(-0.25turn);
+            animation-timing-function: ease-in;
+          }
+          23% {
+            stroke-dashoffset: -51.05087975;
+            transform: rotate(1turn);
+            animation-timing-function: ease-out;
+          }
+          46%, 50% {
+            stroke-dashoffset: -203.795111962;
+            transform: rotate(2.25turn);
+            animation-timing-function: ease-in;
+          }
+          73% {
+            stroke-dashoffset: -51.05087975;
+            transform: rotate(3.5turn);
+            animation-timing-function: ease-out;
+          }
+          96%, to {
+            stroke-dashoffset: -203.795111962;
+            transform: rotate(4.75turn);
+          }
+        }
+
+        .loader-center {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      `}</style>
+
+            <div className={`loader-center ${className}`}>
+                <svg
+                    className="pl"
+                    viewBox="0 0 128 128"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    {/* Ring 2 */}
+                    <circle
+                        className="pl__ring2"
+                        cx="64"
+                        cy="64"
+                        r="52.5"
+                        fill="none"
+                        stroke="hsl(240,92%,19%)"
+                        strokeWidth="12"
+                        transform="rotate(-90,64,64)"
+                        strokeLinecap="round"
+                        strokeDasharray="329.9 329.9"
+                        strokeDashoffset="-329.3"
+                    />
+
+                    {/* Ring 4 */}
+                    <circle
+                        className="pl__ring4"
+                        cx="64"
+                        cy="64"
+                        r="37.5"
+                        fill="none"
+                        stroke="hsl(13,90%,55%)"
+                        strokeWidth="9"
+                        transform="rotate(-90,64,64)"
+                        strokeLinecap="round"
+                        strokeDasharray="254.5 254.5"
+                        strokeDashoffset="-254"
+                    />
+
+                    {/* Ring 6 */}
+                    <circle
+                        className="pl__ring6"
+                        cx="64"
+                        cy="64"
+                        r="22.5"
+                        fill="none"
+                        stroke="hsl(47,99%,49%)"
+                        strokeWidth="9"
+                        transform="rotate(-90,64,64)"
+                        strokeLinecap="round"
+                        strokeDasharray="204.2 204.2"
+                        strokeDashoffset="-203.9"
+                    />
+                </svg>
+            </div>
+        </>
+    );
+};

src/components/ServicesSection.tsx

@@ -14,58 +14,36 @@ import {
 import { BrandedTag } from "./about/BrandedTag";
 import { StandardCTAButton } from "./StandardCTAButton";
 import { navigateTo } from "./Router";
+import { ImageWithFallback } from "./figma/ImageWithFallback";
 
-// Services data
+interface HighlightCard {
-const recognitionItems = [
+  card_title: string;
-  {
+  icon_url: string;
-    id: 1,
+  accessible_label: string;
-    title: "Leadership Pipeline Development",
+  body_text: string;
-    description: "Build a strong foundation for sustainable leadership succession. Identify, assess, and develop high-potential talent through structured pathways that ensure organizational continuity and growth.",
+  display_order: number;
-    icon: <TrendingUp size={28} />,
+}
-    route: '/services/leadership-pipeline-development'
-  },
-  {
-    id: 2,
-    title: "Leadership Development",
-    description: "Comprehensive programs designed to cultivate strategic thinking and emotional intelligence. Develop capabilities that drive organizational success through authentic leadership practices.",
-    icon: <Users size={28} />,
-    route: '/services/leadership-development'
-  },
-  {
-    id: 3,
-    title: "Management Development",
-    description: "Essential skills training for first-time and experienced managers seeking growth. Focus on communication, delegation, and performance management excellence.",
-    icon: <Settings size={28} />,
-    route: '/services/management-development'
-  },
-  {
-    id: 4,
-    title: "Culture & Competence Consulting",
-    description: "Transform organizational culture and build inclusive practices that enhance team collaboration. Navigate cultural differences with confidence and create environments where everyone thrives.",
-    icon: <Globe size={28} />,
-    route: '/services/culture-competence'
-  },
-  {
-    id: 5,
-    title: "Coaching & Mentoring",
-    description: "One-on-one personalized development for senior leaders and high-potential talent. Strategic guidance for complex leadership challenges, career advancement, and personal growth.",
-    icon: <MessageSquare size={28} />,
-    route: '/services/executive-coaching'
-  },
-  {
-    id: 6,
-    title: "Leadership Campus (Facility)",
-    description: "Experience learning in a world-class environment designed for transformation. Our state-of-the-art facility provides the perfect setting for immersive leadership development programs.",
-    icon: <Building size={28} />,
-    route: '/services/learning-facility'
-  }
-];
 
-export function ServicesSection() {
+interface ServicesSectionProps {
+  highlightCards?: HighlightCard[];
+  isLoading?: boolean;
+}
+
+export function ServicesSection({ highlightCards = [], isLoading = false }: ServicesSectionProps) {
   const [isVisible, setIsVisible] = useState(false);
   const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
   const sectionRef = useRef<HTMLDivElement>(null);
 
+  // Create service items from highlightCards data
+  const serviceItems = highlightCards.map((card, index) => ({
+    id: index + 1,
+    title: card.card_title,
+    description: card.body_text,
+    iconUrl: card.icon_url,
+    accessibleLabel: card.accessible_label,
+    route: '/services' // You might want to map to specific routes based on title
+  }));
+
   // Add card refs helper
   const addCardRef = (el: HTMLDivElement | null, index: number) => {
     cardRefs.current[index] = el;
@@ -102,6 +80,28 @@ export function ServicesSection() {
     }
   };
 
+  // Show loading skeleton if isLoading is true
+  if (isLoading) {
+    return (
+      <section ref={sectionRef} className="py-16 lg:py-20" style={{ backgroundColor: '#fff' }}>
+        <div className="section-margin-x">
+          <div className="max-w-7xl mx-auto">
+            <div className="animate-pulse">
+              <div className="h-8 bg-gray-200 rounded w-1/4 mb-6"></div>
+              <div className="h-12 bg-gray-200 rounded w-2/3 mb-4"></div>
+              <div className="h-24 bg-gray-200 rounded w-full mb-8"></div>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="h-48 bg-gray-200 rounded"></div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section
       ref={sectionRef}
@@ -149,7 +149,7 @@ export function ServicesSection() {
                 role="list"
                 aria-label="Leadership development services"
               >
-                {recognitionItems.map((item, index) => (
+                {serviceItems.map((item, index) => (
                   <div
                     key={item.id}
                     ref={(el) => addCardRef(el, index)}
@@ -179,10 +179,19 @@ export function ServicesSection() {
                           style={{
                             backgroundColor: 'var(--color-brand-primary)',
                             borderRadius: '12px',
-                            color: 'white'
                           }}
                         >
-                          {item.icon}
+                          {/* Image icon from icon_url */}
+                          <img
+                            src={item.iconUrl}
+                            alt={item.accessibleLabel || item.title}
+                            className="w-8 h-8 object-contain filter brightness-0 invert" // Makes white icon on colored background
+                            onError={(e) => {
+                              // Fallback if image fails to load
+                              e.currentTarget.style.display = 'none';
+                              // You could add a fallback icon here if needed
+                            }}
+                          />
                         </div>
                       </div>
 
@@ -244,7 +253,7 @@ export function ServicesSection() {
                 role="list"
                 aria-label="Leadership development services"
               >
-                {recognitionItems.map((item, index) => (
+                {serviceItems.map((item, index) => (
                   <div
                     key={item.id}
                     className={`recognition-card-mobile group focus-ring flex-shrink-0 ${isVisible ? 'animate-in' : ''}`}
@@ -274,10 +283,13 @@ export function ServicesSection() {
                           style={{
                             backgroundColor: 'var(--color-brand-primary)',
                             borderRadius: '12px',
-                            color: 'white'
                           }}
                         >
-                          {item.icon}
+                          <ImageWithFallback
+                            src={item.iconUrl}
+                            alt={item.accessibleLabel || item.title}
+                            className="w-full h-full object-cover"
+                          />
                         </div>
                       </div>
 
@@ -301,8 +313,6 @@ export function ServicesSection() {
               </div>
             </div>
           </div>
-
-
         </div>
       </div>
     </section>

src/components/StatsSection.tsx

@@ -1,9 +1,19 @@
-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";
+import { useAnimatedCounter } from "../redux/hooks/useAnimatedCounter";
+
+interface Stat {
+  id: string;
+  number: number;
+  suffix: string;
+  label: string;
+  display_order: number;
+}
+
+interface StatsSectionProps {
+  stats: Stat[];
+  isLoading?: boolean;
+}
 
 interface StatItemProps {
   end: number;
@@ -17,123 +27,104 @@ function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
 
   return (
     <div className="mb-0">
-      {/* Top line */}
       <div
         className="w-full h-[1px] mb-4"
-        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
+        style={{ backgroundColor: "var(--color-brand-gray-muted)" }}
       />
 
-      {/* Large number */}
       <span
         ref={ref}
         className="stats-number mb-3 leading-none"
         style={{
-          color: 'var(--color-brand-primary)',
+          color: "var(--color-brand-primary)",
-          fontFamily: 'var(--font-family-base)'
+          fontFamily: "var(--font-family-base)",
         }}
       >
         {count}
       </span>
 
-      {/* 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)' }}
+          style={{ backgroundColor: "var(--color-brand-accent)" }}
         />
         <span
           className="text-eyebrow"
-          style={{ color: 'var(--color-brand-black)' }}
+          style={{ color: "var(--color-brand-black)" }}
         >
           {label}
         </span>
       </div>
 
-      {/* Bottom line */}
       <div
         className="w-full h-[1px]"
-        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
+        style={{ backgroundColor: "var(--color-brand-gray-muted)" }}
       />
     </div>
   );
 }
 
-export function StatsSection() {
+export function StatsSection({ stats = [], isLoading }: StatsSectionProps) {
+
+  const sortedStats = [...stats].sort(
+    (a, b) => a.display_order - b.display_order
+  );
+
+  if (isLoading) return null;
+
   return (
     <section
       className="py-20"
-      style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
+      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 */}
+            <BrandedTag text="Serving Leaders Across Industries" />
+
             <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">
                   Your Partner in Leadership, Culture, and Capability Building
                 </h2>
-                {/* CTA Button */}
+
                 <PrimaryCTAButton
                   text="About Us"
-                  onClick={() => console.log('About us clicked')}
+                  onClick={() => console.log("About us clicked")}
                   ariaLabel="Learn more about KLC"
                 />
               </div>
 
-              {/* Desktop Statistics */}
+              {/* Desktop */}
               <div className="hidden lg:block lg:col-start-9 lg:col-end-13">
                 <div className="space-y-6">
+                  {sortedStats.map((stat) => (
                     <StatItem
-                    end={27000} 
+                      key={stat.id}
-                    suffix="+" 
+                      end={stat.number}
-                    label="LEADERS DEVELOPED"
+                      suffix={stat.suffix}
-                    duration={2500}
+                      label={stat.label}
-                  />
-                  <StatItem 
-                    end={150} 
-                    suffix="+" 
-                    label="CORPORATES"
-                    duration={2000}
-                  />
-                  <StatItem 
-                    end={5000} 
-                    suffix="+" 
-                    label="ROOM NIGHTS UTILISED"
-                    duration={1800}
                     />
+                  ))}
                 </div>
               </div>
             </div>
 
-            {/* Mobile Statistics - Show below content on mobile/tablet */}
+            {/* Mobile */}
             <div className="block lg:hidden mt-12">
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2 sm:gap-8">
+                {sortedStats.map((stat) => (
                   <StatItem
-                  end={27000} 
+                    key={stat.id}
-                  suffix="+" 
+                    end={stat.number}
-                  label="LEADERS DEVELOPED"
+                    suffix={stat.suffix}
-                  duration={2500}
+                    label={stat.label}
-                />
-                <StatItem 
-                  end={150} 
-                  suffix="+" 
-                  label="CORPORATE CLIENTS"
-                  duration={2000}
-                />
-                <StatItem 
-                  end={20} 
-                  suffix="+" 
-                  label="COUNTRIES SERVED"
-                  duration={1800}
                   />
+                ))}
               </div>
             </div>
+
           </div>
         </div>
       </div>

src/components/VirtualTour360.tsx

@@ -0,0 +1,355 @@
+import React, { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import panormaImage from '../assets/panoramas/cedar_bridge_sunset.jpg';
+import panormaImage2 from '../assets/panoramas/cayley_interior.jpg';
+
+interface VirtualTour360Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onBookNow?: () => void;
+}
+
+// Your 360° panorama images
+const tourScenes = [
+  {
+    id: 0,
+    title: "Cedar Bridge Sunset",
+    capacity: "Outdoor Learning Space",
+    description: "A serene outdoor setting with stunning sunset views, perfect for meditation and reflection sessions at Kautilya Leadership Centre.",
+    features: ["Natural environment", "Sunset views", "Peaceful atmosphere", "Meditation area", "Reflection space"],
+    panoramaUrl: panormaImage
+  },
+  {
+    id: 1,
+    title: "Training Amphitheater",
+    capacity: "80-120 attendees",
+    description: "State-of-the-art amphitheater with tiered seating, advanced acoustics, and immersive presentation technology.",
+    features: ["Tiered seating", "4K projection", "Live streaming", "Acoustic panels"],
+    panoramaUrl: panormaImage2
+  },
+];
+
+export function VirtualTour360({ isOpen, onClose, onBookNow }: VirtualTour360Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [currentSceneIndex, setCurrentSceneIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  
+  // Three.js refs
+  const sceneRef = useRef<THREE.Scene | null>(null);
+  const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+  const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
+  const controlsRef = useRef<OrbitControls | null>(null);
+  const currentMeshRef = useRef<THREE.Mesh | null>(null);
+  const currentTextureRef = useRef<THREE.Texture | null>(null);
+  const animationRef = useRef<number | null>(null);
+
+  // Initialize Three.js scene
+  useEffect(() => {
+    if (!isOpen || !containerRef.current) return;
+
+    const container = containerRef.current;
+
+    // Setup scene
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x050510);
+    sceneRef.current = scene;
+
+    // Setup camera
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 0, 0.1);
+    cameraRef.current = camera;
+
+    // Setup renderer
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.domElement.style.touchAction = "none"; // Important for touch events
+    container.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+
+    // Setup controls - ONLY ROTATION (no built-in zoom)
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableZoom = false; // Disable built-in zoom, we'll handle custom zoom
+    controls.enablePan = false;
+    controls.enableRotate = true;
+    controls.rotateSpeed = 1.2;
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.target.set(0, 0, 0);
+    controlsRef.current = controls;
+
+    // 🔥 CUSTOM ZOOM - Mouse wheel (desktop)
+    const handleWheel = (event: WheelEvent) => {
+      if (!cameraRef.current) return;
+      
+      event.preventDefault();
+      
+      const zoomSpeed = 0.05;
+      cameraRef.current.fov += event.deltaY * zoomSpeed;
+      
+      // Limit zoom range
+      cameraRef.current.fov = Math.max(40, Math.min(90, cameraRef.current.fov));
+      cameraRef.current.updateProjectionMatrix();
+    };
+    
+    renderer.domElement.addEventListener("wheel", handleWheel, { passive: false });
+
+    // 🔥 CUSTOM ZOOM - Mobile pinch gesture
+    let lastDistance = 0;
+    
+    const getDistance = (touches: TouchList) => {
+      if (touches.length < 2) return 0;
+      const dx = touches[0].clientX - touches[1].clientX;
+      const dy = touches[0].clientY - touches[1].clientY;
+      return Math.sqrt(dx * dx + dy * dy);
+    };
+    
+    const handleTouchMove = (e: TouchEvent) => {
+      if (!cameraRef.current) return;
+      
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        
+        const distance = getDistance(e.touches);
+        
+        if (lastDistance > 0) {
+          const delta = distance - lastDistance;
+          cameraRef.current.fov -= delta * 0.05;
+          cameraRef.current.fov = Math.max(40, Math.min(90, cameraRef.current.fov));
+          cameraRef.current.updateProjectionMatrix();
+        }
+        
+        lastDistance = distance;
+      }
+    };
+    
+    const handleTouchEnd = () => {
+      lastDistance = 0;
+    };
+    
+    renderer.domElement.addEventListener("touchmove", handleTouchMove, { passive: false });
+    renderer.domElement.addEventListener("touchend", handleTouchEnd);
+
+    // Animation loop
+    const animate = () => {
+      animationRef.current = requestAnimationFrame(animate);
+      
+      if (controlsRef.current) controlsRef.current.update();
+      if (rendererRef.current && sceneRef.current && cameraRef.current) {
+        rendererRef.current.render(sceneRef.current, cameraRef.current);
+      }
+    };
+    animate();
+
+    // Load first panorama
+    loadPanorama(tourScenes[0].panoramaUrl);
+
+    // Handle window resize
+    const handleResize = () => {
+      if (cameraRef.current && rendererRef.current) {
+        cameraRef.current.aspect = window.innerWidth / window.innerHeight;
+        cameraRef.current.updateProjectionMatrix();
+        rendererRef.current.setSize(window.innerWidth, window.innerHeight);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup
+    return () => {
+      if (animationRef.current) cancelAnimationFrame(animationRef.current);
+      
+      window.removeEventListener('resize', handleResize);
+      renderer.domElement.removeEventListener("wheel", handleWheel);
+      renderer.domElement.removeEventListener("touchmove", handleTouchMove);
+      renderer.domElement.removeEventListener("touchend", handleTouchEnd);
+      
+      if (controlsRef.current) controlsRef.current.dispose();
+      if (rendererRef.current) rendererRef.current.dispose();
+      if (currentTextureRef.current) currentTextureRef.current.dispose();
+      
+      if (container && renderer.domElement && container.contains(renderer.domElement)) {
+        container.removeChild(renderer.domElement);
+      }
+    };
+  }, [isOpen]);
+
+  // Load panorama image
+  const loadPanorama = (imageUrl: string) => {
+    if (!sceneRef.current) return;
+    
+    setIsLoading(true);
+    
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.load(
+      imageUrl,
+      (texture) => {
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        texture.colorSpace = THREE.SRGBColorSpace;
+        
+        // Remove old mesh
+        if (currentMeshRef.current) sceneRef.current?.remove(currentMeshRef.current);
+        if (currentTextureRef.current) currentTextureRef.current.dispose();
+        
+        // Create new sphere with texture
+        const geometry = new THREE.SphereGeometry(500, 64, 64);
+        const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
+        const sphere = new THREE.Mesh(geometry, material);
+        sceneRef.current?.add(sphere);
+        
+        currentMeshRef.current = sphere;
+        currentTextureRef.current = texture;
+        
+        // Reset camera FOV when loading new scene
+        if (cameraRef.current) {
+          cameraRef.current.fov = 75;
+          cameraRef.current.updateProjectionMatrix();
+        }
+        
+        setIsLoading(false);
+      },
+      undefined,
+      (error) => {
+        console.error('Error loading panorama:', error);
+        setIsLoading(false);
+      }
+    );
+  };
+
+  // Navigate to next scene
+  const nextScene = () => {
+    const nextIndex = (currentSceneIndex + 1) % tourScenes.length;
+    setCurrentSceneIndex(nextIndex);
+    loadPanorama(tourScenes[nextIndex].panoramaUrl);
+  };
+
+  // Navigate to previous scene
+  const prevScene = () => {
+    const prevIndex = (currentSceneIndex - 1 + tourScenes.length) % tourScenes.length;
+    setCurrentSceneIndex(prevIndex);
+    loadPanorama(tourScenes[prevIndex].panoramaUrl);
+  };
+
+  // Jump to specific scene
+  const goToScene = (index: number) => {
+    setCurrentSceneIndex(index);
+    loadPanorama(tourScenes[index].panoramaUrl);
+  };
+
+  const currentScene = tourScenes[currentSceneIndex];
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] bg-black">
+      {/* Canvas container for Three.js */}
+      <div ref={containerRef} className="absolute inset-0" />
+      
+      {/* UI Overlay */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* Top Bar */}
+        <div className="absolute top-0 left-0 right-0 bg-gradient-to-r from-[#04045B]/95 to-[#04045B]/80 backdrop-blur-md border-b border-yellow-400/30 pointer-events-auto z-30">
+          <div className="flex justify-between items-center px-4 md:px-6 py-3 md:py-4">
+            <div className="flex items-center gap-2 md:gap-3">
+              <div className="w-8 h-8 md:w-10 md:h-10 bg-yellow-400 rounded-xl flex items-center justify-center font-bold text-[#04045B] text-base md:text-xl">
+                KL
+              </div>
+              <div className="hidden sm:block">
+                <h1 className="text-white font-semibold text-sm md:text-lg">Kautilya Leadership Centre</h1>
+                <p className="text-white/70 text-xs">360° Immersive Experience</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center gap-2 md:gap-3">
+              <button
+                onClick={prevScene}
+                className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-yellow-400 hover:text-[#04045B] transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
+                aria-label="Previous scene"
+              >
+                ◀
+              </button>
+              <div className="bg-black/50 backdrop-blur-sm px-3 py-1.5 md:px-4 rounded-full text-xs md:text-sm font-medium">
+                {currentScene.title}
+              </div>
+              <button
+                onClick={nextScene}
+                className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-yellow-400 hover:text-[#04045B] transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
+                aria-label="Next scene"
+              >
+                ▶
+              </button>
+              <button
+                onClick={onClose}
+                className="w-8 h-8 md:w-9 md:h-9 rounded-full bg-white/20 hover:bg-red-500 transition-all flex items-center justify-center text-white text-sm md:text-base touch-manipulation"
+                aria-label="Close"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Info Panel - Bottom Left */}
+        <div className="absolute bottom-4 md:bottom-6 left-4 md:left-6 max-w-[280px] md:max-w-[320px] bg-[#04045B]/90 backdrop-blur-md rounded-xl md:rounded-2xl p-4 md:p-5 border border-yellow-400/40 pointer-events-auto z-25">
+          <h2 className="text-yellow-400 text-lg md:text-2xl font-bold mb-1">{currentScene.title}</h2>
+          <div className="text-white/80 text-xs md:text-sm mb-2 md:mb-3 flex items-center gap-2">
+            🎯 Capacity: {currentScene.capacity}
+          </div>
+          <p className="text-white/90 text-xs md:text-sm mb-3 md:mb-4 leading-relaxed">
+            {currentScene.description}
+          </p>
+          <div className="flex flex-wrap gap-1.5 md:gap-2 mb-3 md:mb-4">
+            {currentScene.features.map((feature, idx) => (
+              <span key={idx} className="bg-yellow-400/20 text-yellow-400 text-[10px] md:text-xs px-2 py-1 md:px-3 rounded-full">
+                ✓ {feature}
+              </span>
+            ))}
+          </div>
+          <button
+            onClick={() => {
+              onBookNow?.();
+              onClose();
+            }}
+            className="w-full bg-yellow-400 hover:bg-yellow-500 text-[#04045B] font-bold py-2 md:py-2.5 rounded-full transition-all flex items-center justify-center gap-2 text-sm md:text-base touch-manipulation"
+          >
+            📅 Book This Space →
+          </button>
+        </div>
+
+        {/* Scene Thumbnails - Bottom Right */}
+        <div className="absolute bottom-4 md:bottom-6 right-4 md:right-6 flex flex-col gap-2 pointer-events-auto z-25">
+          {tourScenes.map((scene, idx) => (
+            <button
+              key={scene.id}
+              onClick={() => goToScene(idx)}
+              className={`bg-black/70 backdrop-blur-sm rounded-full px-3 py-1.5 md:px-4 md:py-2 flex items-center gap-2 md:gap-3 hover:bg-[#04045B]/90 transition-all touch-manipulation ${
+                idx === currentSceneIndex ? 'border-l-4 border-yellow-400' : 'border-l-4 border-yellow-400/40'
+              }`}
+            >
+              <div className="w-1.5 h-1.5 md:w-2 md:h-2 bg-yellow-400 rounded-full" />
+              <span className="text-white text-[10px] md:text-xs font-medium truncate max-w-[120px] md:max-w-[150px]">
+                {scene.title}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        {/* Loading Overlay */}
+        {isLoading && (
+          <div className="absolute inset-0 bg-[#04045B] flex items-center justify-center z-50">
+            <div className="text-center">
+              <div className="w-12 h-12 border-4 border-yellow-400/30 border-t-yellow-400 rounded-full animate-spin mx-auto mb-4"></div>
+              <p className="text-white text-sm">Loading 360° Experience...</p>
+            </div>
+          </div>
+        )}
+
+        {/* Instruction Hint */}
+        <div className="absolute bottom-4 md:bottom-6 left-1/2 transform -translate-x-1/2 bg-black/60 backdrop-blur-sm rounded-full px-3 py-1.5 md:px-4 md:py-2 text-white text-[10px] md:text-xs pointer-events-auto whitespace-nowrap">
+          🖱️ Drag to look around • 👆 Pinch/Scroll to zoom in/out
+        </div>
+      </div>
+    </div>
+  );
+}

src/global.d.ts

@@ -1,5 +1,15 @@
-// declarations.d.ts
+/// <reference types="vite/client" />
 
+// Vite ENV typing
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+// Image modules
 declare module "*.png" {
   const src: string;
   export default src;

src/main.tsx

@@ -4,9 +4,14 @@ import "../src/styles/globals.css";
 import { BrowserRouter } from "react-router-dom";
 import ScrollToTop from "./components/ScrollToTop";
 
+import { Provider } from "react-redux";
+import { store } from "./redux/store/Store";
+
 createRoot(document.getElementById("root")!).render(
+  <Provider store={store}>
     <BrowserRouter>
       <ScrollToTop />
       <App />
     </BrowserRouter>
+  </Provider>
 );

src/pages/FAQ.tsx

@@ -1,16 +1,45 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Plus, Minus, HelpCircle, Mail } from 'lucide-react';
 import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
 import { useNavigate } from 'react-router-dom';
+import { useGetFaqsQuery, useGetFaqCategoriesQuery } from '../redux/services/faqApi';
 
 interface FAQItemProps {
   question: string;
   answer: string;
   isOpen: boolean;
   onToggle: () => void;
+  tags?: Array<{ tag_name: string; display_order: number }>;
 }
 
-const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle }) => {
+interface FAQItemData {
+  id: string;
+  question: string;
+  answer: string;
+  content_status: string;
+  content_category_xid: string;
+  content_category: {
+    id: string;
+    category_name: string;
+  };
+  faq_tags: Array<{
+    id: string;
+    tag_name: string;
+    display_order: number;
+  }>;
+  created_at: string;
+  updated_at: string;
+}
+
+interface CategoryData {
+  id: string;
+  category_name: string;
+  display_order: number;
+  for_faq: boolean;
+  for_blog: boolean;
+}
+
+const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle, tags }) => {
   return (
     <div className="bg-white border border-gray-200 rounded-lg p-6 mb-4 transition-all duration-300 hover:shadow-md">
       <button
@@ -36,95 +65,122 @@ const FAQItem: React.FC<FAQItemProps> = ({ question, answer, isOpen, onToggle })
       </button>
 
       <div
-        className={`overflow-hidden transition-all duration-300 ease-out ${
+        className={`overflow-hidden transition-all duration-300 ease-out ${isOpen ? 'max-h-96 opacity-100 mt-4' : 'max-h-0 opacity-0'
-          isOpen ? 'max-h-96 opacity-100 mt-4' : 'max-h-0 opacity-0'
           }`}
       >
-        <p className="text-body-lg leading-relaxed" style={{ color: 'var(--color-black)' }}>
+        <p className="text-body-lg leading-relaxed mb-4" style={{ color: 'var(--color-black)' }}>
           {answer}
         </p>
+
+        {/* Display tags if available */}
+        {tags && tags.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-3">
+            {tags.map((tag, index) => (
+              <span
+                key={index}
+                className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-small"
+              >
+                {tag.tag_name}
+              </span>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
 };
 
 export function FAQ() {
-  const [openItems, setOpenItems] = useState<number[]>([]);
+  const [openItems, setOpenItems] = useState<string[]>([]);
   const [activeCategory, setActiveCategory] = useState<string>('all');
+  const [filteredFaqs, setFilteredFaqs] = useState<FAQItemData[]>([]);
   const navigate = useNavigate();
 
-  const toggleItem = (index: number) => {
+  // Fetch FAQ categories
+  const {
+    data: categoriesResponse,
+    isLoading: isLoadingCategories
+  } = useGetFaqCategoriesQuery({
+    limit: 100,
+    offset: 0
+  });
+
+  // Fetch FAQs with publish status
+  const {
+    data: faqResponse,
+    isLoading: isLoadingFaqs,
+    isError,
+    refetch
+  } = useGetFaqsQuery({
+    content_status: 'publish',
+    limit: 20
+  });
+
+  // Filter categories to only those marked for FAQ
+  const categories = [
+    { id: 'all', label: 'All Questions' },
+    ...(categoriesResponse?.data?.items
+      ?.filter((category: CategoryData) => category.for_faq)
+      .map((category: CategoryData) => ({
+        id: category.id, // Use the actual category ID
+        label: category.category_name,
+        display_order: category.display_order
+      }))
+      .sort((a:any, b:any) => (a.display_order || 0) - (b.display_order || 0)) || [])
+  ];
+
+  // Filter FAQs based on active category
+  useEffect(() => {
+    if (faqResponse?.data?.items) {
+      if (activeCategory === 'all') {
+        setFilteredFaqs(faqResponse.data.items);
+      } else {
+        // Filter by content_category_xid using the actual category ID
+        const filtered = faqResponse.data.items.filter(
+          (item: FAQItemData) => item.content_category_xid === activeCategory
+        );
+        setFilteredFaqs(filtered);
+      }
+    }
+  }, [activeCategory, faqResponse]);
+
+  const toggleItem = (id: string) => {
     setOpenItems(prev =>
-      prev.includes(index) 
+      prev.includes(id)
-        ? prev.filter(i => i !== index)
+        ? prev.filter(i => i !== id)
-        : [...prev, index]
+        : [...prev, id]
     );
   };
 
-  const categories = [
+  // Handle loading state
-    { id: 'all', label: 'All Questions' },
+  if (isLoadingFaqs || isLoadingCategories) {
-    { id: 'getting-started', label: 'Getting Started' },
+    return (
-    { id: 'membership', label: 'Members and Pricing' },
+      <div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen flex items-center justify-center">
-    { id: 'requests', label: 'Book Requests and Recommendations' },
+        <div className="text-center">
-    { id: 'account', label: 'Account & Technical Issues' }
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
-  ];
+          <p className="mt-4 text-gray-600">Loading FAQs...</p>
-
+        </div>
-  const faqData = [
+      </div>
-    {
+    );
-      question: "How do I sign up for an account?",
-      answer: "Signing up is easy! Just download the app, click on 'Sign Up' and follow the prompts. You can use your email address, Google, or Facebook to create an account.",
-      category: 'getting-started'
-    },
-    {
-      question: "What are the membership club packages?",
-      answer: "We offer subscription packages to our learners which allow you to avail of the different products/services available at a discounted rate.",
-      category: 'membership'
-    },
-    {
-      question: "Can I buy the products without purchasing the membership package?",
-      answer: "Yes. You can either buy individual products separately or avail of our subscription packages to get attractive discounts.",
-      category: 'membership'
-    },
-    {
-      question: "Can I change my subscription plan mid-way?",
-      answer: "Yes, you can change your subscription to opt for a higher package. You would be required to pay a differential amount.",
-      category: 'membership'
-    },
-    {
-      question: "What is auto-renewal?",
-      answer: "Each plan can be setup for auto-renewal. A transaction of Rs. 5 is charged for this by the payment vendor. You can discontinue the auto-renewal at any point.",
-      category: 'membership'
-    },
-    {
-      question: "How can I cancel or change my order?",
-      answer: "Just drop an email to connect@leadershipcentre.in with the reference number of your purchase order. Wherever applicable (in case we have not shipped it yet), we will cancel your order. Alternatively, you will have to send the details to us and we will offer you a refund or exchange.",
-      category: 'requests'
-    },
-    {
-      question: "Does Leadership Centre provide cash on delivery?",
-      answer: "We do not offer cash on delivery (COD).",
-      category: 'requests'
-    },
-    {
-      question: "Do you accept returns?",
-      answer: "As our products / services are electronic in nature and access is granted soon as your payment is received/recorded, return of a product / service is not enabled. However, if you wish to cancel an order after effecting payment, you may do so prior to viewing / downloading / consuming the product / service purchased within 15 days (from the date of purchase and payment).",
-      category: 'requests'
-    },
-    {
-      question: "I have paid via netbanking/debit/credit card, how will I get refund?",
-      answer: "We shall be refunding the money back into the same account via which you have paid for your purchase on Leadership Centre.",
-      category: 'account'
-    },
-    {
-      question: "How do I reset my password?",
-      answer: "To reset your password, go to the login screen and click 'Forgot Password'. Enter your email address and we'll send you a secure link to reset your password.",
-      category: 'account'
   }
-  ];
 
-  const filteredFAQs = activeCategory === 'all' 
+  // Handle error state
-    ? faqData 
+  if (isError) {
-    : faqData.filter(faq => faq.category === activeCategory);
+    return (
+      <div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <HelpCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+          <h2 className="text-h3 mb-2">Failed to load FAQs</h2>
+          <p className="text-gray-600 mb-4">Please try again later</p>
+          <PrimaryCTAButton
+            text="Retry"
+            onClick={() => refetch()}
+            className="cta-text-black"
+          />
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div style={{ backgroundColor: '#FFFFFF' }} className="min-h-screen">
@@ -141,14 +197,14 @@ export function FAQ() {
             Everything you need to know about features, membership, and troubleshooting.
           </p>
 
-          {/* Category Filter Tags */}
+          {/* Category Filter Tags - Only show if there are categories */}
+          {categories.length > 1 && (
             <div className="flex flex-wrap gap-3 mb-8">
               {categories.map((category) => (
                 <button
                   key={category.id}
                   onClick={() => setActiveCategory(category.id)}
-                className={`px-4 py-2 rounded-full text-small font-medium transition-all duration-200 ${
+                  className={`px-4 py-2 rounded-full text-small font-medium transition-all duration-200 ${activeCategory === category.id
-                  activeCategory === category.id
                       ? 'text-white'
                       : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                     }`}
@@ -161,23 +217,37 @@ export function FAQ() {
                 </button>
               ))}
             </div>
+          )}
         </div>
       </section>
 
       {/* FAQ Section */}
       <section className="pb-20 section-margin-x">
         <div className="max-w-4xl mx-auto">
+          {filteredFaqs.length > 0 ? (
             <div className="space-y-0">
-            {filteredFAQs.map((faq, index) => (
+              {filteredFaqs.map((faq) => (
                 <FAQItem
-                key={`${activeCategory}-${index}`}
+                  key={faq.id}
                   question={faq.question}
                   answer={faq.answer}
-                isOpen={openItems.includes(index)}
+                  // tags={faq.faq_tags} 
-                onToggle={() => toggleItem(index)}
+                  isOpen={openItems.includes(faq.id)}
+                  onToggle={() => toggleItem(faq.id)}
                 />
               ))}
             </div>
+          ) : (
+            <div className="text-center py-12">
+              <HelpCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-h4 mb-2">No FAQs found</h3>
+              <p className="text-gray-600">
+                {activeCategory === 'all'
+                  ? 'No published FAQs available at the moment.'
+                  : 'No FAQs available in this category.'}
+              </p>
+            </div>
+          )}
         </div>
       </section>
 

src/pages/HomePage.tsx

@@ -1,32 +1,43 @@
-import React from 'react';
+import React from "react";
-import HeroSection from '../components/HeroSection';
+import HeroSection from "../components/HeroSection";
-import { StatsSection } from '../components/StatsSection';
+import { StatsSection } from "../components/StatsSection";
-import { LogosSection } from '../components/LogosSection';
+import { LogosSection } from "../components/LogosSection";
-import { ServicesSection } from '../components/ServicesSection';
+import { ServicesSection } from "../components/ServicesSection";
-import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
+import { VirtualSpaceSection } from "../components/VirtualSpaceSection";
-import { TestimonialsSection } from '../components/TestimonialsSection';
+import { TestimonialsSection } from "../components/TestimonialsSection";
-import { UpcomingWebinarsSection } from '../components/UpcomingWebinarsSection';
+import { InsightsSection } from "../components/InsightsSection";
-import { InsightsSection } from '../components/InsightsSection';
+import { CTABannerSection } from "../components/CTABannerSection";
-import { WhitepapersSection } from '../components/WhitepapersSection';
-import { CTABannerSection } from '../components/CTABannerSection';
 import { motion } from "motion/react";
-import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
+import { PrimaryCTAButton } from "../components/PrimaryCTAButton";
-import { BrandedTag } from '../components/about/BrandedTag';
+import { BrandedTag } from "../components/about/BrandedTag";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-
+import { useGetHomepageQuery } from "../redux/services/homepageApi";
-
 
 const HomePage: React.FC = () => {
     const navigate = useNavigate();
+
+    const { data, isLoading } = useGetHomepageQuery({
+        landing_page_type: "home",
+    });
+
+    const heroSections = data?.hero_sections ?? [];
+    const stats = data?.stats_sections ?? [];
+    const highlightCards = data?.highlight_cards ?? [];
+    const ctaBands = data?.cta_bands ?? [];
+
     return (
         <>
-            <HeroSection />
+            <HeroSection heroSections={heroSections} isLoading={isLoading} />
-            <StatsSection />
+
+            {/* Stats Section */}
+            <StatsSection stats={stats} isLoading={isLoading} />
+
             <LogosSection />
-            <ServicesSection />
+            <ServicesSection highlightCards={highlightCards} isLoading={isLoading} />
+
             <div>
-                <div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
+                <div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec">
-                    {/* Branded Tag */}
+
                     <motion.div
                         initial={{ opacity: 0, y: -20 }}
                         whileInView={{ opacity: 1, y: 0 }}
@@ -40,7 +51,6 @@ const HomePage: React.FC = () => {
                         />
                     </motion.div>
 
-                    {/* Main Heading */}
                     <motion.h2
                         className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
                         initial={{ opacity: 0, y: 30 }}
@@ -51,7 +61,6 @@ const HomePage: React.FC = () => {
                         Experience Our Space Virtually
                     </motion.h2>
 
-                    {/* Subheading */}
                     <motion.p
                         className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
                         initial={{ opacity: 0, y: 20 }}
@@ -59,10 +68,10 @@ const HomePage: React.FC = () => {
                         transition={{ duration: 0.8, delay: 0.4 }}
                         viewport={{ once: true }}
                     >
-                        Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
+                        Take a virtual walk through our state-of-the-art facility designed to
+                        inspire leadership excellence and foster collaborative learning.
                     </motion.p>
 
-                    {/* Main CTA Button - Explore Our Space */}
                     <motion.div
                         className="flex justify-center"
                         initial={{ opacity: 0, y: 20 }}
@@ -73,19 +82,19 @@ const HomePage: React.FC = () => {
                         <div className="hero-slide-button">
                             <PrimaryCTAButton
                                 text="Explore Our Space"
-                                onClick={() => navigate('/services/learning-facility')}
+                                onClick={() => navigate("/services/learning-facility")}
                                 ariaLabel="Explore our virtual learning space and facilities"
                             />
                         </div>
                     </motion.div>
                 </div>
+
                 <VirtualSpaceSection />
             </div>
+
             <TestimonialsSection />
-            {/* <UpcomingWebinarsSection /> */}
             <InsightsSection />
-            {/* <WhitepapersSection /> */}
+            <CTABannerSection ctaBands={ctaBands} isLoading={isLoading} />
-            <CTABannerSection />
         </>
     );
 };

src/pages/HomePageNew.tsx

@@ -1,104 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-// import { navigateTo } from './Router';
-import { navigateTo } from '../components/Router';
-import svgPaths from "../imports/svg-i1joeov37f";
-import { StatsSection } from '../components/StatsSection';
-import { LogosSection } from '../components/LogosSection';
-import { ServicesSection } from '../components/ServicesSection';
-import { ServicesSectionNew } from '../components/ServiceSectionNew';
-import { LearningEnvionment } from '../components/LearningEnvionment';
-import { motion } from "motion/react";
-import { BrandedTag } from '../components/about/BrandedTag';
-import { PrimaryCTAButton } from '../components/PrimaryCTAButton';
-import { VirtualSpaceSection } from '../components/VirtualSpaceSection';
-import { useNavigate } from 'react-router-dom';
-import HeroSection from '../components/HeroSection';
-interface SlideData {
-    id: number;
-    title: string;
-    backgroundImage: string;
-    shortTitle: string;
-    ctaText: string;
-}
-
-export default function HomePageNew() {
-
-
-
-
-
-
-
-
-
-
-    const navigate = useNavigate()
-    return (
-        <>
-            <HeroSection />
-            <StatsSection />
-            <LogosSection />
-            <ServicesSectionNew />
-            {/* <LearningEnvionment /> */}
-            <div>
-                <div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec" >
-                    {/* Branded Tag */}
-                    <motion.div
-                        initial={{ opacity: 0, y: -20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.6 }}
-                        viewport={{ once: true }}
-                    >
-                        <BrandedTag
-                            text="Virtual Learning Environment"
-                            className="justify-center"
-                            variant="white"
-                        />
-                    </motion.div>
-
-                    {/* Main Heading */}
-                    <motion.h2
-                        className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
-                        initial={{ opacity: 0, y: 30 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8, delay: 0.2 }}
-                        viewport={{ once: true }}
-                    >
-                        Experience Our Space Virtually
-                    </motion.h2>
-
-                    {/* Subheading */}
-                    <motion.p
-                        className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8, delay: 0.4 }}
-                        viewport={{ once: true }}
-                    >
-                        Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
-                    </motion.p>
-
-                    {/* Main CTA Button - Explore Our Space */}
-                    <motion.div
-                        className="flex justify-center"
-                        initial={{ opacity: 0, y: 20 }}
-                        whileInView={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8, delay: 0.6 }}
-                        viewport={{ once: true }}
-                    >
-                        <div className="hero-slide-button">
-                            <PrimaryCTAButton
-                                text="Explore Our Space"
-                                onClick={() => navigate('/services/learning-facility')}
-                                ariaLabel="Explore our virtual learning space and facilities"
-                            />
-                        </div>
-                    </motion.div>
-                </div>
-                <VirtualSpaceSection />
-            </div>
-        </>
-
-    );
-}

src/redux/services/aboutUsApi.ts

@@ -0,0 +1,82 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+
+export interface HeroSection {
+  id: string;
+  background_image_url: string;
+  background_image_alt_text: string;
+  headline: string;
+  subtext: string;
+  cta_text: string;
+  cta_destination: string;
+}
+
+export interface HowWeWorkItem {
+  id: string;
+  title: string;
+  description: string;
+  image_url: string;
+  display_order: number;
+}
+
+export interface StatItem {
+  id: string;
+  number: number;
+  suffix: string;
+  label: string;
+  display_order: number;
+}
+
+export interface TeamMember {
+  id: string;
+  display_order: number;
+  name_role: string;
+  photo_url: string;
+  alt_text: string;
+  bio: string;
+}
+
+export interface AboutUsData {
+  hero_section: HeroSection;
+  our_promise_title: string;
+  how_we_work_title: string;
+  who_we_are_title: string;
+  our_team_title: string;
+  how_we_work: HowWeWorkItem[];
+  stat_section: StatItem[];
+  our_team: TeamMember[];
+}
+
+export interface AboutUsResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: AboutUsData;
+}
+
+export const aboutUsApi = createApi({
+  reducerPath: "aboutUsApi",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["AboutUs"],
+  endpoints: (builder) => ({
+
+    // ✅ GET About Us
+    getAboutUs: builder.query<AboutUsData, void>({
+      query: () => ({
+        url: "/admin/about-us",
+        method: "GET",
+      }),
+
+      // 🔥 extract only useful data
+      transformResponse: (response: AboutUsResponse) => response.data,
+
+      providesTags: ["AboutUs"],
+    }),
+
+  }),
+});
+
+export const {
+  useGetAboutUsQuery,
+} = aboutUsApi;

src/redux/services/baseQuery.ts

@@ -1,14 +1,12 @@
 import { fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 const rawBaseQuery = fetchBaseQuery({
-  baseUrl: 'http://localhost:3000/api',
+  baseUrl: import.meta.env.VITE_API_URL,
 });
 
 const baseQueryWithReauth = async (args: any, api: any, extraOptions: any) => {
   const result = await rawBaseQuery(args, api, extraOptions);
 
-  // Optional: reauthentication logic if result.error?.status === 401
-
   return result;
 };
 

src/redux/services/blogApi.ts

@@ -0,0 +1,126 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+export interface BlogTag {
+  id: string;
+  blog_xid: string;
+  tag_name: string;
+  display_order: number;
+}
+
+export interface BlogItem {
+  id: string;
+  content_category: string;
+  content_type: string;
+  title: string;
+  slug_name: string;
+  content: string;
+  banner_img: string;
+  meta_title: string;
+  meta_description: string;
+  content_status: string;
+  updated_at: string;
+  blog_tags: BlogTag[];
+  short_description: string | null;
+  content_category_id?: string; // Add this field to store the category ID
+}
+
+export interface Pagination {
+  limit: number;
+  offset: number;
+  total: number;
+}
+
+export interface BlogListResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: {
+    pagination: Pagination;
+    items: BlogItem[];
+  };
+  errors: any;
+  correlation_id: string;
+}
+
+export interface BlogListParams {
+  limit?: number;
+  offset?: number;
+  search?: string;
+  content_status?: string;
+  content_type?: string;
+  date_range?:
+    | "all_time"
+    | "last_7_days"
+    | "last_30_days"
+    | "last_3_months"
+    | "last_6_months";
+  sort_by?: "most_recent" | "oldest_first" | "title_az";
+  content_category_id?: string; // Changed from category to content_category_id
+  tag_id?: string;
+}
+
+export interface BlogByIdResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: BlogItem;
+  errors: any;
+  correlation_id: string;
+}
+
+export const blogApi = createApi({
+  reducerPath: "blogApi",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["blog"],
+  endpoints: (builder) => ({
+    // ✅ GET BLOGS LIST
+    getBlogs: builder.query<BlogListResponse, BlogListParams>({
+      query: ({
+        limit = 10,
+        offset = 0,
+        search,
+        content_status = "publish",
+        content_type,
+        date_range,
+        sort_by = "most_recent",
+        content_category_id,
+        tag_id,
+      }) => {
+        // Build params object
+        const params: Record<string, any> = {
+          limit,
+          offset,
+          sort_by,
+        };
+
+        // Only add params if they have values
+        if (search) params.search = search;
+        if (content_status) params.content_status = content_status;
+        if (content_type) params.content_type = content_type;
+        if (date_range) params.date_range = date_range;
+        if (content_category_id)
+          params.content_category_id = content_category_id; // Send UUID
+        if (tag_id && tag_id !== "all") params.tag_id = tag_id;
+
+        return {
+          url: "/admin/blogs/list",
+          method: "GET",
+          params,
+        };
+      },
+      providesTags: ["blog"],
+    }),
+
+    getBlogByID: builder.query<BlogItem, string>({
+      query: (id) => ({
+        url: `/admin/blogs/list/${id}`,
+        method: "GET",
+      }),
+      transformResponse: (response: BlogByIdResponse) => response.data,
+      providesTags: ["blog"],
+    }),
+  }),
+});
+
+export const { useGetBlogsQuery, useGetBlogByIDQuery } = blogApi;

src/redux/services/contactUsApi.ts

@@ -0,0 +1,39 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+export const contactUsApi = createApi({
+  reducerPath: "contactUsApi",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["LeadCategories", "Leads"],
+  endpoints: (builder) => ({
+
+    // GET Lead Categories
+    getLeadCategories: builder.query({
+      query: ({ limit = 10, offset = 0, status = "active" }) => ({
+        url: "admin/prepopulate/lead-categories/list",
+        params: {
+          limit,
+          offset,
+          status,
+        },
+      }),
+      providesTags: ["LeadCategories"],
+    }),
+
+    // CREATE Lead
+    createLead: builder.mutation({
+      query: (body) => ({
+        url: "admin/leads/create",
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["Leads"],
+    }),
+
+  }),
+});
+
+export const {
+  useGetLeadCategoriesQuery,
+  useCreateLeadMutation,
+} = contactUsApi;

src/redux/services/faqApi.ts

@@ -0,0 +1,44 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+export const faqApi = createApi({
+  reducerPath: "faqApi",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["Faq", "FaqTags"],
+  endpoints: (builder) => ({
+    
+    // GET FAQs LIST
+    getFaqs: builder.query({
+      query: ({ limit = 10, offset = 0, search_term, content_status, content_category_xid }) => ({
+        url: "admin/faq/list",
+        params: {
+          limit,
+          offset,
+          search_term,
+          content_status,
+          content_category_xid,
+        },
+      }),
+      providesTags: ["Faq"],
+    }),
+
+    // GET category TAGS LIST
+    getFaqCategories: builder.query({
+      query: ({ limit = 10, offset = 0, search_query }) => ({
+        url: "admin/prepopulate/content-categories/list",
+        params: {
+          limit,
+          offset,
+          search_query,
+        },
+      }),
+      providesTags: ["FaqTags"],
+    }),
+
+  }),
+});
+
+export const {
+  useGetFaqsQuery,
+  useGetFaqCategoriesQuery,
+} = faqApi;

src/redux/services/homepageApi.ts

@@ -0,0 +1,92 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import baseQueryWithReauth from "./baseQuery";
+
+/* ================= HERO TYPES ================= */
+
+export interface HeroSection {
+  id: string;
+  landing_page_type: string;
+  background_image_url: string;
+  background_image_alt_text: string;
+  headline: string;
+  subtext: string;
+  cta_text: string;
+  cta_destination: string;
+}
+
+/* ================= STATS TYPES ================= */
+
+export interface StatItem {
+  id: string;
+  landing_page_type: string;
+  number: number;
+  suffix: string;
+  label: string;
+  display_order: number;
+}
+
+/* ================= HIGHLIGHT CARD ================= */
+
+export interface HighlightCard {
+  card_title: string;
+  icon_url: string;
+  accessible_label: string;
+  body_text: string;
+  display_order: number;
+}
+
+/* ================= CTA BAND ================= */
+
+export interface CtaBand {
+  id: string;
+  background_image_url: string;
+  background_image_alt_text: string;
+  text: string;
+  cta_text: string;
+  cta_destination: string;
+}
+
+/* ================= RESPONSE ================= */
+
+export interface HomePageResponse {
+  success: boolean;
+  status: number;
+  message: string;
+  data: {
+    hero_sections: HeroSection[];
+    stats_sections: StatItem[];
+    highlight_cards: HighlightCard[];
+    cta_bands: CtaBand[];
+  };
+  errors: any;
+  correlation_id: string;
+}
+
+/* ================= API ================= */
+
+export const homepageApi = createApi({
+  reducerPath: "homepageApi",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["Homepage"],
+  endpoints: (builder) => ({
+
+    getHomepage: builder.query<
+      HomePageResponse["data"],
+      { landing_page_type: "home" | "services" | "about_us" }
+    >({
+      query: ({ landing_page_type }) => ({
+        url: "/admin/home-page/list",
+        params: { landing_page_type },
+      }),
+
+      transformResponse: (response: HomePageResponse) => response.data,
+
+      providesTags: [{ type: "Homepage", id: "LIST" }],
+    }),
+
+  }),
+});
+
+/* ================= HOOKS ================= */
+
+export const { useGetHomepageQuery } = homepageApi;

src/redux/store/Store.tsx

@@ -0,0 +1,27 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { homepageApi } from "../services/homepageApi";
+import { faqApi } from "../services/faqApi";
+import { contactUsApi } from "../services/contactUsApi";
+import { blogApi } from "../services/blogApi";
+import { aboutUsApi } from "../services/aboutUsApi";
+
+export const store = configureStore({
+  reducer: {
+    [homepageApi.reducerPath]: homepageApi.reducer,
+    [faqApi.reducerPath]: faqApi.reducer,
+    [contactUsApi.reducerPath]: contactUsApi.reducer,
+    [blogApi.reducerPath]: blogApi.reducer,
+    [aboutUsApi.reducerPath]: aboutUsApi.reducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+      homepageApi.middleware,
+      faqApi.middleware,
+      contactUsApi.middleware,
+      blogApi.middleware,
+      aboutUsApi.middleware,
+    ),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/services/storeSwitchToDashboard.tsx

@@ -1,37 +0,0 @@
-// storeSwitchToDashboard.service.ts
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import baseQueryWithReauth from "./baseQuery";
-
-export type ContactUsFormData = {
-  t_id: string;
-  name: string;
-  email: string;
-  country: string;
-  phone_number: string;
-  service: string;
-  budget: string;
-  message: string;
-  development_stage: string;
-  startTime: string;
-  nda_signing: string | boolean;
-  from_page: string;
-  ip?: string;
-  user_agent?: string;
-  contact_us_attachment?: File;
-};
-
-export const storeSwitchToDashboard = createApi({
-  reducerPath: "storeSwitchToDashboard",
-  baseQuery: baseQueryWithReauth,
-  endpoints: (builder) => ({
-    storeSwitchToDashboard: builder.mutation<void, FormData>({
-      query: (formData) => ({
-        url: "/api/store-contact-us-data",
-        method: "POST",
-        body: formData,
-      }),
-    }),
-  }),
-});
-
-export const { useStoreSwitchToDashboardMutation } = storeSwitchToDashboard;

src/store/Store.tsx

@@ -1,16 +0,0 @@
-// store.ts
-import { configureStore } from '@reduxjs/toolkit';
-import { setupListeners } from '@reduxjs/toolkit/query';
-import { storeSwitchToDashboard } from '../services/storeSwitchToDashboard';
-
-export const store = configureStore({
-  reducer: {
-    [storeSwitchToDashboard.reducerPath]: storeSwitchToDashboard.reducer,
-  },
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat(storeSwitchToDashboard.middleware),
-});
-
-setupListeners(store.dispatch);
-
-export default store;

src/styles/globals.css

@@ -1092,6 +1092,10 @@ html {
   }
 }
 
+button{
+  cursor: pointer;
+}
+
 /* Responsive modal styles - No Scroll Version */
 @media (max-width: 1024px) {
   .virtual-space-modal-container {

src/utils/getReadingTime.ts

@@ -0,0 +1,14 @@
+export const getReadingTime = (text: string): string => {
+  if (!text) return "0 min read";
+
+  // Remove HTML tags if present
+  const cleanText = text.replace(/<[^>]+>/g, "");
+
+  // Count words
+  const words = cleanText.trim().split(/\s+/).length;
+
+  const wordsPerMinute = 200;
+  const minutes = Math.ceil(words / wordsPerMinute);
+
+  return `${minutes} min read`;
+};

src/utils/urlHelpers.ts

@@ -0,0 +1,52 @@
+// utils/urlHelpers.ts
+
+/**
+ * Creates a URL-friendly slug from a title or string
+ * Example: "Ad ut neque enim omn" -> "ad-ut-neque-enim-omn"
+ */
+export const createSlug = (text: string): string => {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '') // Remove special characters
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/-+/g, '-'); // Replace multiple hyphens with single hyphen
+};
+
+/**
+ * Creates an SEO-friendly URL slug with full UUID
+ * Example: "Ad ut neque enim omn", "e7d611b6-853b-4785-b508-599eeed2af92" -> "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92"
+ */
+export const getSlugWithId = (title: string, id: string) => {
+  return `${createSlug(title)}-${id}`;
+};
+
+/**
+ * Extracts the slug from a slug+id string (removes the last part which is the UUID)
+ * Example: "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92" -> "ad-ut-neque-enim-omn"
+ */
+export const extractSlugFromSlugAndId = (slugAndId: string): string => {
+  const parts = slugAndId.split('-');
+  // Remove the last 5 parts (UUID is 5 segments when split by hyphen)
+  for (let i = 0; i < 5; i++) {
+    parts.pop();
+  }
+  return parts.join('-');
+};
+
+/**
+ * Extracts the full UUID from a slug+id string
+ * Example: "ad-ut-neque-enim-omn-e7d611b6-853b-4785-b508-599eeed2af92" -> "e7d611b6-853b-4785-b508-599eeed2af92"
+ */
+export const extractIdFromSlug = (slugAndId: string): string | null => {
+  const parts = slugAndId.split('-');
+
+  if (parts.length < 5) return null;
+
+  const id = parts.slice(-5).join('-');
+
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+  return uuidRegex.test(id) ? id : null;
+};

tsconfig.json

@@ -16,6 +16,13 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": [
-  "references": [{ "path": "./tsconfig.node.json" }]
+    "src",
+    "src/redux/hooks",
+    "src/redux/store",
+    "src/redux/services"
+  ],
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ]
 }

vite.config.ts

@@ -1,68 +1,92 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import * as path from "path";
 
-  import { defineConfig } from 'vite';
+export default defineConfig({
-  import react from '@vitejs/plugin-react-swc';
-import * as path from 'path';
-
-  export default defineConfig({
   plugins: [react()],
   resolve: {
-      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+    extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
     alias: {
-        'vaul@1.1.2': 'vaul',
+      "vaul@1.1.2": "vaul",
-        'sonner@2.0.3': 'sonner',
+      "sonner@2.0.3": "sonner",
-        'recharts@2.15.2': 'recharts',
+      "recharts@2.15.2": "recharts",
-        'react-resizable-panels@2.1.7': 'react-resizable-panels',
+      "react-resizable-panels@2.1.7": "react-resizable-panels",
-        'react-hook-form@7.55.0': 'react-hook-form',
+      "react-hook-form@7.55.0": "react-hook-form",
-        'react-day-picker@8.10.1': 'react-day-picker',
+      "react-day-picker@8.10.1": "react-day-picker",
-        'next-themes@0.4.6': 'next-themes',
+      "next-themes@0.4.6": "next-themes",
-        'lucide-react@0.487.0': 'lucide-react',
+      "lucide-react@0.487.0": "lucide-react",
-        'input-otp@1.4.2': 'input-otp',
+      "input-otp@1.4.2": "input-otp",
-        'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png': path.resolve(__dirname, './src/assets/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png'),
+      "figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png": path.resolve(
-        'figma:asset/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png': path.resolve(__dirname, './src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png'),
+        __dirname,
-        'figma:asset/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png': path.resolve(__dirname, './src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png'),
+        "./src/assets/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png",
-        'figma:asset/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png': path.resolve(__dirname, './src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png'),
+      ),
-        'figma:asset/a28d79dd35b730f689b77dbb30452ca27bd25759.png': path.resolve(__dirname, './src/assets/a28d79dd35b730f689b77dbb30452ca27bd25759.png'),
+      "figma:asset/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png": path.resolve(
-        'figma:asset/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png': path.resolve(__dirname, './src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png'),
+        __dirname,
-        'figma:asset/4833274f0a593cd31fdefe553b70bb016de281af.png': path.resolve(__dirname, './src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png'),
+        "./src/assets/e8fad960112d5eba554c3969d08891ebe4d4b9c7.png",
-        'figma:asset/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png': path.resolve(__dirname, './src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png'),
+      ),
-        'embla-carousel-react@8.6.0': 'embla-carousel-react',
+      "figma:asset/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png": path.resolve(
-        'cmdk@1.1.1': 'cmdk',
+        __dirname,
-        'class-variance-authority@0.7.1': 'class-variance-authority',
+        "./src/assets/d5bab6ea4f3d8cef3b0425c45cfee7faea19fdbc.png",
-        '@radix-ui/react-tooltip@1.1.8': '@radix-ui/react-tooltip',
+      ),
-        '@radix-ui/react-toggle@1.1.2': '@radix-ui/react-toggle',
+      "figma:asset/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png": path.resolve(
-        '@radix-ui/react-toggle-group@1.1.2': '@radix-ui/react-toggle-group',
+        __dirname,
-        '@radix-ui/react-tabs@1.1.3': '@radix-ui/react-tabs',
+        "./src/assets/c57ec1f4466f68e607139a3cd6d52f7e2f372408.png",
-        '@radix-ui/react-switch@1.1.3': '@radix-ui/react-switch',
+      ),
-        '@radix-ui/react-slot@1.1.2': '@radix-ui/react-slot',
+      "figma:asset/a28d79dd35b730f689b77dbb30452ca27bd25759.png": path.resolve(
-        '@radix-ui/react-slider@1.2.3': '@radix-ui/react-slider',
+        __dirname,
-        '@radix-ui/react-separator@1.1.2': '@radix-ui/react-separator',
+        "./src/assets/a28d79dd35b730f689b77dbb30452ca27bd25759.png",
-        '@radix-ui/react-select@2.1.6': '@radix-ui/react-select',
+      ),
-        '@radix-ui/react-scroll-area@1.2.3': '@radix-ui/react-scroll-area',
+      "figma:asset/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png": path.resolve(
-        '@radix-ui/react-radio-group@1.2.3': '@radix-ui/react-radio-group',
+        __dirname,
-        '@radix-ui/react-progress@1.1.2': '@radix-ui/react-progress',
+        "./src/assets/6bdf8056f51bbdc6dd9dab9044a6579a254bd02c.png",
-        '@radix-ui/react-popover@1.1.6': '@radix-ui/react-popover',
+      ),
-        '@radix-ui/react-navigation-menu@1.2.5': '@radix-ui/react-navigation-menu',
+      "figma:asset/4833274f0a593cd31fdefe553b70bb016de281af.png": path.resolve(
-        '@radix-ui/react-menubar@1.1.6': '@radix-ui/react-menubar',
+        __dirname,
-        '@radix-ui/react-label@2.1.2': '@radix-ui/react-label',
+        "./src/assets/4833274f0a593cd31fdefe553b70bb016de281af.png",
-        '@radix-ui/react-hover-card@1.1.6': '@radix-ui/react-hover-card',
+      ),
-        '@radix-ui/react-dropdown-menu@2.1.6': '@radix-ui/react-dropdown-menu',
+      "figma:asset/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png": path.resolve(
-        '@radix-ui/react-dialog@1.1.6': '@radix-ui/react-dialog',
+        __dirname,
-        '@radix-ui/react-context-menu@2.2.6': '@radix-ui/react-context-menu',
+        "./src/assets/037c4659b7b0bf15b1dfdcd4868cb42e8257e838.png",
-        '@radix-ui/react-collapsible@1.1.3': '@radix-ui/react-collapsible',
+      ),
-        '@radix-ui/react-checkbox@1.1.4': '@radix-ui/react-checkbox',
+      "embla-carousel-react@8.6.0": "embla-carousel-react",
-        '@radix-ui/react-avatar@1.1.3': '@radix-ui/react-avatar',
+      "cmdk@1.1.1": "cmdk",
-        '@radix-ui/react-aspect-ratio@1.1.2': '@radix-ui/react-aspect-ratio',
+      "class-variance-authority@0.7.1": "class-variance-authority",
-        '@radix-ui/react-alert-dialog@1.1.6': '@radix-ui/react-alert-dialog',
+      "@radix-ui/react-tooltip@1.1.8": "@radix-ui/react-tooltip",
-        '@radix-ui/react-accordion@1.2.3': '@radix-ui/react-accordion',
+      "@radix-ui/react-toggle@1.1.2": "@radix-ui/react-toggle",
-        '@': path.resolve(__dirname, './src'),
+      "@radix-ui/react-toggle-group@1.1.2": "@radix-ui/react-toggle-group",
+      "@radix-ui/react-tabs@1.1.3": "@radix-ui/react-tabs",
+      "@radix-ui/react-switch@1.1.3": "@radix-ui/react-switch",
+      "@radix-ui/react-slot@1.1.2": "@radix-ui/react-slot",
+      "@radix-ui/react-slider@1.2.3": "@radix-ui/react-slider",
+      "@radix-ui/react-separator@1.1.2": "@radix-ui/react-separator",
+      "@radix-ui/react-select@2.1.6": "@radix-ui/react-select",
+      "@radix-ui/react-scroll-area@1.2.3": "@radix-ui/react-scroll-area",
+      "@radix-ui/react-radio-group@1.2.3": "@radix-ui/react-radio-group",
+      "@radix-ui/react-progress@1.1.2": "@radix-ui/react-progress",
+      "@radix-ui/react-popover@1.1.6": "@radix-ui/react-popover",
+      "@radix-ui/react-navigation-menu@1.2.5":
+        "@radix-ui/react-navigation-menu",
+      "@radix-ui/react-menubar@1.1.6": "@radix-ui/react-menubar",
+      "@radix-ui/react-label@2.1.2": "@radix-ui/react-label",
+      "@radix-ui/react-hover-card@1.1.6": "@radix-ui/react-hover-card",
+      "@radix-ui/react-dropdown-menu@2.1.6": "@radix-ui/react-dropdown-menu",
+      "@radix-ui/react-dialog@1.1.6": "@radix-ui/react-dialog",
+      "@radix-ui/react-context-menu@2.2.6": "@radix-ui/react-context-menu",
+      "@radix-ui/react-collapsible@1.1.3": "@radix-ui/react-collapsible",
+      "@radix-ui/react-checkbox@1.1.4": "@radix-ui/react-checkbox",
+      "@radix-ui/react-avatar@1.1.3": "@radix-ui/react-avatar",
+      "@radix-ui/react-aspect-ratio@1.1.2": "@radix-ui/react-aspect-ratio",
+      "@radix-ui/react-alert-dialog@1.1.6": "@radix-ui/react-alert-dialog",
+      "@radix-ui/react-accordion@1.2.3": "@radix-ui/react-accordion",
+      "@": path.resolve(__dirname, "./src"),
     },
   },
   build: {
-      target: 'esnext',
+    target: "esnext",
-      outDir: 'build',
+    outDir: "build",
   },
   server: {
     port: 4000,
     open: true,
   },
-  });
+});