refactor: centralize data fetching in layout components

app/components/layout/Footer/Footer.tsx

@@ -1,11 +1,32 @@
+"use client";
+
+import { useEffect, useState } from 'react';
 import FooterTop from './FooterTop';
 import FooterBottom from './FooterBottom';
+import { footerApi, FooterData } from "../../../../api/footerApi";
+import footerData from "./footer.json";
 
 const Footer = () => {
+    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();
+    }, []);
+
     return (
         <>
-            <FooterTop />
-            <FooterBottom />
+            <FooterTop data={data} />
+            <FooterBottom data={data} />
         </>
     );
 };