update

frontEnd/components/pages/home/HomeBanner.tsx

@@ -1,10 +1,12 @@
 "use client";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
+import { useHomeBanners } from "@/lib/hooks/useHome";
 
 const HomeBanner = () => {
   const [currentTextIndex, setCurrentTextIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const { data: banners, loading, error } = useHomeBanners();
   
   // Fix viewport height for mobile browsers (especially iOS Safari)
   useEffect(() => {
@@ -28,70 +30,22 @@ const HomeBanner = () => {
       window.removeEventListener('resize', handleOrientationChange);
     };
   }, []);
-  
-  // Static banner slides data based on actual services
-  const carouselTexts = [
-    {
-      id: 1,
-      badge: "Custom Development",
-      icon: "fa-solid fa-code",
-      heading: "Tailored Enterprise Software ",
-      highlight: "Development",
-      subheading: "Aligned with Your Business Goals",
-      description: "We design and build custom digital solutions that deliver reliable, scalable, and future-ready applications, driving measurable value and competitive advantage for your enterprise.",
-      button_text: "Explore Solutions",
-      button_url: "/services/custom-software-development",
-      is_active: true,
-      display_order: 1,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString()
-    },
-    {
-      id: 2,
-      badge: "Business Intelligence",
-      icon: "fa-solid fa-brain",
-      heading: "AI-Powered ",
-      highlight: "Analytics",
-      subheading: "Transform Data into Insights",
-      description: "Turn enterprise data into actionable intelligence with advanced AI and machine learning, enabling smarter decisions, performance optimization, and data-driven innovation.",
-      button_text: "Discover AI Solutions",
-      button_url: "/services/ai-powered-business-intelligence",
-      is_active: true,
-      display_order: 2,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString()
-    },
-    {
-      id: 3,
-      badge: "System Integration",
-      icon: "fa-solid fa-plug",
-      heading: "Enterprise Systems ",
-      highlight: "Integration",
-      subheading: "Seamless Connectivity",
-      description: "Connect everything — from payment systems and ERP platforms to cloud services, enabling your enterprise to operate seamlessly across physical and digital environments.",
-      button_text: "View Integrations",
-      button_url: "/services/external-systems-integrations",
-      is_active: true,
-      display_order: 3,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString()
-    },
-    {
-      id: 4,
-      badge: "Incident Management",
-      icon: "fa-solid fa-bell",
-      heading: "Intelligent Incident ",
-      highlight: "Management",
-      subheading: "Minimize Downtime & Protect Trust",
-      description: "Cloud-based incident management that empowers teams to detect, respond, and resolve issues faster, reducing downtime and maintaining customer confidence.",
-      button_text: "Learn More",
-      button_url: "/services/incident-management-saas",
-      is_active: true,
-      display_order: 4,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString()
-    }
-  ];
+
+  // Transform API data to match component format
+  const carouselTexts = useMemo(() => {
+    if (!banners || banners.length === 0) return [];
+    
+    return banners.map(banner => ({
+      icon: banner.icon,
+      badge: banner.badge,
+      heading: banner.heading,
+      highlight: banner.highlight,
+      subheading: banner.subheading,
+      description: banner.description,
+      button_text: banner.button_text,
+      button_url: banner.button_url,
+    }));
+  }, [banners]);
 
   // Carousel rotation effect
   useEffect(() => {
@@ -113,8 +67,57 @@ const HomeBanner = () => {
 
   const currentText = carouselTexts[currentTextIndex];
 
-  if (!currentText) {
-    return null;
+  // Show loading state
+  if (loading) {
+    return (
+      <section className="modern-banner">
+        <div className="container">
+          <div className="banner-content">
+            <div className="content-center">
+              <div className="spinner-border text-primary" role="status">
+                <span className="visually-hidden">Loading...</span>
+              </div>
+              <p className="mt-3">Loading banner content...</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Show error state
+  if (error) {
+    return (
+      <section className="modern-banner">
+        <div className="container">
+          <div className="banner-content">
+            <div className="content-center">
+              <div className="alert alert-danger" role="alert">
+                <h4 className="alert-heading">Error Loading Content</h4>
+                <p>{error}</p>
+                <hr />
+                <p className="mb-0">Please try refreshing the page or contact support if the problem persists.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // Show no data message when there's no banner content
+  if (!currentText || carouselTexts.length === 0) {
+    return (
+      <section className="modern-banner">
+        <div className="container">
+          <div className="banner-content">
+            <div className="content-center">
+              <h1 className="main-heading">No data available</h1>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
   }
 
   return (
@@ -393,7 +396,7 @@ const HomeBanner = () => {
                   <span>{currentText.button_text || "Learn More"}</span>
                   <i className="fa-solid fa-arrow-right"></i>
                 </Link>
-                <Link href="contact-us" className="cta-secondary">
+                <Link href="/contact-us" className="cta-secondary">
                   <i className="fa-solid fa-phone"></i>
                   <span>Contact Sales</span>
                 </Link>