src/components/sections/footer/FooterBase.tsx

@@ -1,108 +1,89 @@
-"use client";
+'use client';
 
-// import Image from "next/image";
+import React from 'react';
-import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
-import FooterColumns from "@/components/shared/FooterColumns";
-import { cls } from "@/lib/utils";
-import type { FooterColumn } from "@/components/shared/FooterColumns";
 
-interface FooterBaseProps {
+interface FooterLink {
-  // logoSrc?: string;
+  label: string;
-  logoText?: string;
+  href: string;
-  // logoWidth?: number;
-  // logoHeight?: number;
-  columns: FooterColumn[];
-  copyrightText?: string;
-  onPrivacyClick?: () => void;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  // logoClassName?: string;
-  logoTextClassName?: string;
-  columnsClassName?: string;
-  columnClassName?: string;
-  columnTitleClassName?: string;
-  columnItemClassName?: string;
-  copyrightContainerClassName?: string;
-  copyrightTextClassName?: string;
-  privacyButtonClassName?: string;
 }
 
-const FooterBase = ({
+interface FooterColumn {
-  // logoSrc = "/brand/logowhite.svg",
+  title: string;
-  logoText = "Webild",
+  items: FooterLink[];
-  // logoWidth = 120,
+}
-  // logoHeight = 40,
+
-  columns,
+interface FooterBaseProps {
-  copyrightText = `© 2025 | Webild`,
+  logoText: string;
-  onPrivacyClick,
+  copyrightText: string;
-  ariaLabel = "Site footer",
+  columns: FooterColumn[];
-  className = "",
+}
-  containerClassName = "",
+
-  // logoClassName = "",
+export default function FooterBase({
-  logoTextClassName = "",
+  logoText,
-  columnsClassName = "",
+  copyrightText,
-  columnClassName = "",
+  columns
-  columnTitleClassName = "",
+}: FooterBaseProps) {
-  columnItemClassName = "",
-  copyrightContainerClassName = "",
-  copyrightTextClassName = "",
-  privacyButtonClassName = "",
-}: FooterBaseProps) => {
   return (
-    <footer
+    <footer className="bg-slate-900 text-slate-100 py-12 px-4 sm:px-6 lg:px-8">
-      role="contentinfo"
+      <div className="max-w-7xl mx-auto">
-      aria-label={ariaLabel}
+        {/* Top Section */}
-      className={cls("relative overflow-hidden w-full primary-button text-primary-cta-text py-15 mt-20", className)}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
-    >
+          {/* Logo Section */}
-      <div
+          <div className="flex flex-col justify-start">
-        className={cls("relative w-content-width mx-auto z-10", containerClassName)}
+            <h2 className="text-2xl font-bold text-white mb-2">{logoText}</h2>
-      >
+            <p className="text-slate-400 text-sm">
-        <div className="flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
+              Building amazing communities together
-          {/* {logoSrc ? (
+            </p>
-            <div className="flex-shrink-0">
-              <Image
-                src={logoSrc}
-                alt="Logo"
-                width={logoWidth}
-                height={logoHeight}
-                className={cls("object-contain", logoClassName)}
-                unoptimized={logoSrc.startsWith('http') || logoSrc.startsWith('//')}
-                aria-hidden={true}
-              />
-            </div>
-          ) : ( */}
-            <h2 className={cls("text-4xl font-medium text-primary-cta-text", logoTextClassName)}>
-              {logoText}
-            </h2>
-          {/* )} */}
-
-          <FooterColumns
-            columns={columns}
-            className={columnsClassName}
-            columnClassName={columnClassName}
-            columnTitleClassName={cls("text-primary-cta-text/50", columnTitleClassName)}
-            columnItemClassName={cls("text-primary-cta-text", columnItemClassName)}
-          />
           </div>
 
-        <div
+          {/* Footer Columns */}
-          className={cls("w-full flex items-center justify-between pt-9 border-t border-primary-cta-text/20", copyrightContainerClassName)}
+          {columns.map((column, index) => (
+            <div key={index}>
+              <h3 className="text-lg font-semibold text-white mb-4">
+                {column.title}
+              </h3>
+              <ul className="space-y-2">
+                {column.items.map((item, itemIndex) => (
+                  <li key={itemIndex}>
+                    <a
+                      href={item.href}
+                      className="text-slate-400 hover:text-white transition-colors duration-200 text-sm"
                     >
-          <span className={cls("text-primary-cta-text/50 text-sm", copyrightTextClassName)}>
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Divider */}
+        <div className="border-t border-slate-700 my-8"></div>
+
+        {/* Bottom Section */}
+        <div className="flex flex-col sm:flex-row justify-between items-center">
+          <p className="text-slate-400 text-sm mb-4 sm:mb-0">
             {copyrightText}
-          </span>
+          </p>
-          <ButtonTextUnderline
+          <div className="flex gap-6">
-            text="Privacy Policy"
+            <a
-            onClick={onPrivacyClick}
+              href="#"
-            className={cls("text-primary-cta-text/50", privacyButtonClassName)}
+              className="text-slate-400 hover:text-white transition-colors duration-200"
-          />
+              aria-label="Privacy Policy"
+            >
+              <span className="text-sm">Privacy Policy</span>
+            </a>
+            <a
+              href="#"
+              className="text-slate-400 hover:text-white transition-colors duration-200"
+              aria-label="Terms of Service"
+            >
+              <span className="text-sm">Terms of Service</span>
+            </a>
+          </div>
         </div>
       </div>
     </footer>
   );
-};
+}
-
-FooterBase.displayName = "FooterBase";
-
-export default FooterBase;