Add footer API integration

app/components/layout/Footer/FooterTop.tsx

@@ -1,8 +1,28 @@
-import Link from 'next/link';
-import footerData from './footer.json';
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { footerApi, FooterData } from "../../../../api/footerApi";
+import footerData from "./footer.json";
 
 const FooterTop = () => {
-    const { top } = footerData;
+    const [data, setData] = useState<FooterData>(footerData as FooterData);
+
+    useEffect(() => {
+        const loadFooterData = async () => {
+            try {
+                const apiData = await footerApi.getFooter();
+                setData(apiData);
+            } catch (error) {
+                console.error("Failed to load footer data from API, using static data:", error);
+                // Keep using static data as fallback
+            }
+        };
+
+        loadFooterData();
+    }, []);
+
+    const { top } = data;
 
     return (
         <footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>