Update src/components/sections/footer/FooterBaseReveal.tsx

src/components/sections/footer/FooterBaseReveal.tsx

@@ -1,126 +1,89 @@
-"use client";
+'use client';
 
-import { useRef, useEffect, useState } from "react";
-import FooterBase from "./FooterBase";
-import { cls } from "@/lib/utils";
+import React from 'react';
+
+interface FooterLink {
+  label: string;
+  href: string;
+}
 
 interface FooterColumn {
   title: string;
-  items: Array<{
-    label: string;
-    href?: string;
-    onClick?: () => void;
-  }>;
+  items: FooterLink[];
 }
 
 interface FooterBaseRevealProps {
-  // logoSrc?: string;
-  // logoWidth?: number;
-  // logoHeight?: number;
+  logoText: string;
+  copyrightText: string;
   columns: FooterColumn[];
-  copyrightText?: string;
-  onPrivacyClick?: () => void;
-  ariaLabel?: string;
-  className?: string;
-  wrapperClassName?: string;
-  containerClassName?: string;
-  footerClassName?: string;
-  footerContainerClassName?: string;
-  // logoClassName?: string;
-  columnsClassName?: string;
-  columnClassName?: string;
-  columnTitleClassName?: string;
-  columnItemClassName?: string;
-  copyrightContainerClassName?: string;
-  copyrightTextClassName?: string;
-  privacyButtonClassName?: string;
 }
 
-const FooterBaseReveal = ({
-  // logoSrc,
-  // logoWidth,
-  // logoHeight,
-  columns,
+export default function FooterBaseReveal({
+  logoText,
   copyrightText,
-  onPrivacyClick,
-  ariaLabel,
-  className = "",
-  wrapperClassName = "",
-  containerClassName = "",
-  footerClassName,
-  footerContainerClassName,
-  // logoClassName,
-  columnsClassName,
-  columnClassName,
-  columnTitleClassName,
-  columnItemClassName,
-  copyrightContainerClassName,
-  copyrightTextClassName,
-  privacyButtonClassName,
-}: FooterBaseRevealProps) => {
-  const footerRef = useRef<HTMLDivElement>(null);
-  const [footerHeight, setFooterHeight] = useState<number>(0);
-
-  useEffect(() => {
-    const updateHeight = () => {
-      if (footerRef.current) {
-        const height = footerRef.current.offsetHeight;
-        setFooterHeight(height);
-      }
-    };
-
-    updateHeight();
-
-    const resizeObserver = new ResizeObserver(updateHeight);
-    const currentFooter = footerRef.current;
-
-    if (currentFooter) {
-      resizeObserver.observe(currentFooter);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
+  columns
+}: FooterBaseRevealProps) {
   return (
-    <section
-      className={cls("relative z-0 w-full mt-20", className)}
-      style={{
-        height: footerHeight ? `${footerHeight}px` : "auto",
-        clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
-      }}
-    >
-      <div
-        className={cls("fixed bottom-0 w-full flex items-center justify-center overflow-hidden", wrapperClassName)}
-        style={{ height: footerHeight ? `${footerHeight}px` : "auto" }}
-      >
-        <div ref={footerRef} className={cls("w-full", containerClassName)}>
-          <FooterBase
-            // logoSrc={logoSrc}
-            // logoWidth={logoWidth}
-            // logoHeight={logoHeight}
-            columns={columns}
-            copyrightText={copyrightText}
-            onPrivacyClick={onPrivacyClick}
-            ariaLabel={ariaLabel}
-            className={cls("mt-0", footerClassName)}
-            containerClassName={footerContainerClassName}
-            // logoClassName={logoClassName}
-            columnsClassName={columnsClassName}
-            columnClassName={columnClassName}
-            columnTitleClassName={columnTitleClassName}
-            columnItemClassName={columnItemClassName}
-            copyrightContainerClassName={copyrightContainerClassName}
-            copyrightTextClassName={copyrightTextClassName}
-            privacyButtonClassName={privacyButtonClassName}
-          />
+    <footer className="bg-slate-900 text-slate-100 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Top Section */}
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+          {/* Logo Section */}
+          <div className="flex flex-col justify-start">
+            <h2 className="text-2xl font-bold text-white mb-2">{logoText}</h2>
+            <p className="text-slate-400 text-sm">
+              Building amazing communities together
+            </p>
+          </div>
+
+          {/* Footer Columns */}
+          {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"
+                    >
+                      {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}
+          </p>
+          <div className="flex gap-6">
+            <a
+              href="#"
+              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>
-    </section>
+    </footer>
   );
-};
-
-FooterBaseReveal.displayName = "FooterBaseReveal";
-
-export default FooterBaseReveal;
+}