feat: Refactor home page components

app/components/layout/Footer/FooterBottom.tsx

@@ -22,7 +22,13 @@ const FooterBottom = () => {
         loadFooterData();
     }, []);
 
-    const { bottom } = data;
+    // Ensure we always have a valid `bottom` object, even if API shape changes
+    const bottom = data?.bottom || footerData.bottom;
+
+    // If bottom is still missing, avoid rendering to prevent runtime errors
+    if (!bottom) {
+        return null;
+    }
 
     return (
         <div className="footer-bottom">

app/components/layout/Footer/FooterTop.tsx

@@ -22,10 +22,19 @@ const FooterTop = () => {
         loadFooterData();
     }, []);
 
-    const { top } = data;
+    // Ensure we always have a valid `top` object, even if API shape changes
+    const top = data?.top || footerData.top;
+
+    // If for some reason `top` is still missing, avoid rendering to prevent runtime errors
+    if (!top) {
+        return null;
+    }
 
     return (
-        <footer className="footer-section fix bg-cover" style={{ backgroundImage: `url('${top.bgImage}')` }}>
+        <footer
+            className="footer-section fix bg-cover"
+            style={top.bgImage ? { backgroundImage: `url('${top.bgImage}')` } : undefined}
+        >
             <div className="container">
                 <div className="footer-wrapper">
                     <div className="row">