Add PublicFooter-kc component and update imports across pages

src/components/PublicFooter-kc.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from './ui/button';
+
+const PublicFooter = () => {
+  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+
+  return (
+    <>
+      {/* Main Footer */}
+      <footer className="bg-[#644c9f] px-20 border-t border-[rgba(0,0,0,0.1)] py-4 md:py-[35px] flex items-center justify-center">
+        <div className="  flex flex-col lg:flex-row gap-8 sm:gap-12 md:gap-16 lg:gap-20 xl:gap-30 items-center justify-around w-full max-w-7xl">
+          <div className="w-32  sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
+            <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
+          </div>
+          <nav className="flex sm:px-4 px-2 flex-col sm:flex-row gap-32 items-start justify-center w-full lg:w-auto">
+            <div className="flex-col gap-2 w-full sm:w-auto sm:min-w-[163px] hidden sm:flex">
+              <div className="">
+                <p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppinss Sans', sans-serif" }}>About</p>
+              </div>
+              <Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
+              <Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
+              <Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
+            </div>
+            <div className="hidden sm:flex flex-col gap-2 w-full sm:w-auto sm:min-w-[148px]">
+              <div className="">
+                <p className="text-white text-xl font-semibold" style={{ fontFamily: "'Poppins Sans', sans-serif" }}>Connect</p>
+              </div>
+              <Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
+              <Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
+              <Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
+            </div>
+            <div className="flex flex-col gap-2  justify-center  w-full sm:w-auto sm:min-w-[220px] md:min-w-[271px] text-center">
+              <div className="pb-4 w-full flex  ">
+                <Link to="/donate" className="block">
+                  <Button style={{ fontFamily: "'Nunito Sans', sans-serif" }} className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-14 py-6 text-[19px] leading-6 sm:text-lg  font-semibold ">
+                    Donate
+                  </Button>
+                </Link>
+              </div>
+              <div className=' w-full flex justify-center '>
+                <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left  w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  LOAF is supported by<br />the Hollyfield Foundation
+                </p>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </footer>
+
+      {/* Bottom Footer */}
+      <footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-16 py-5">
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
+          <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
+<<<<<<< HEAD
+            <a href="/#terms" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              Terms of Service
+            </a>
+            <a href="/#privacy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+=======
+            <Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Terms of Service
+            </Link>
+            <Link to="/privacy-policy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Inter', sans-serif" }}>
+>>>>>>> main
+              Privacy Policy
+            </Link>
+          </nav>
+          <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            © 2025 LOAF. All Rights Reserved.
+          </p>
+          <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Designed and Managed by{' '}
+            <a href="https://konceptkit.com/" className="text-white transition-colors whitespace-nowrap">
+              Koncept Kit
+            </a>
+          </p>
+        </div>
+      </footer>
+    </>
+  );
+};
+
+export default PublicFooter;

src/components/PublicNavbar.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from './ui/button';
 import { useAuth } from '../context/AuthContext';
 import { ChevronDown, Menu, X } from 'lucide-react';
@@ -13,8 +13,23 @@ import {
 const PublicNavbar = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const location = useLocation();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
+  // Helper function to check if a path is active
+  const isActive = (path) => {
+    if (path.includes('#')) {
+      // For hash links like /#welcome
+      return location.pathname + location.hash === path || location.hash === path.replace('/', '');
+    }
+    return location.pathname === path || location.pathname.startsWith(path + '/');
+  };
+
+  // Check if any About Us sub-page is active
+  const isAboutActive = () => {
+    return location.pathname.startsWith('/about');
+  };
+
   // LOAF logo (local)
   const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
 
@@ -27,29 +42,59 @@ const PublicNavbar = () => {
     }
   };
 
+  // Active and inactive link styles for desktop
+  const getDesktopLinkClasses = (path) => {
+    const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
+    if (isActive(path)) {
+      return `${baseClasses} text-[#ff9e77] hover:text-[#ff8c64] `;
+    }
+    return `${baseClasses} text-white hover:opacity-80`;
+  };
+
+  // Active and inactive link styles for mobile
+  const getMobileLinkClasses = (path) => {
+    const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
+    if (isActive(path)) {
+      return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
+    }
+    return `${baseClasses} text-white hover:bg-[#48286e]`;
+  };
+
+  // Active and inactive link styles for mobile sub-items (About Us)
+  const getMobileSubLinkClasses = (path) => {
+    const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
+    if (isActive(path)) {
+      return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
+    }
+    return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
+  };
+
   return (
     <>
       {/* Top Header - Auth Actions */}
-      <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 flex justify-end items-center gap-4 sm:gap-6">
-        <button
-          onClick={handleAuthAction}
-          className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
-          style={{ fontFamily: "'Poppins', sans-serif" }}
-        >
-          {user ? 'Logout' : 'Login'}
-        </button>
-        {!user && (
-          <Link
-            to="/register"
-            className="text-white text-base font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+      <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
+        <div className='flex gap-4 sm:gap-6'>
+
+          <button
+            onClick={handleAuthAction}
+            className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
-            Register
-          </Link>
-        )}
+            {user ? 'Logout' : 'Login'}
+          </button>
+          {!user && (
+            <Link
+              to="/register"
+              className="text-white text-base font-medium hover:opacity-80 transition-opacity"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Register
+            </Link>
+          )}
+        </div>
         <Link to="/donate">
           <Button
-            className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
+            className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
             style={{ fontFamily: "'Montserrat', sans-serif" }}
           >
             Donate
@@ -58,7 +103,7 @@ const PublicNavbar = () => {
       </header>
 
       {/* Main Header - Navigation */}
-      <header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
+      <header className="sticky top-0 inset-x-0 z-40 bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
         <Link to="/">
           <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
         </Link>
@@ -73,18 +118,21 @@ const PublicNavbar = () => {
         </button>
 
         {/* Desktop Navigation */}
-        <nav className="hidden lg:flex gap-10 items-center">
+        <nav className="hidden lg:flex gap-6 items-center">
           <Link
             to="/#welcome"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            className={getDesktopLinkClasses('/#welcome')}
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Welcome
           </Link>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <button className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity flex items-center gap-1 bg-transparent border-none cursor-pointer"
-                style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <button
+                className={`${isAboutActive()
+                  ? "text-[#ff9e77] hover:text-[#ff8c64]"
+                  : "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 About Us
                 <ChevronDown className="h-4 w-4" />
               </button>
@@ -92,19 +140,19 @@ const PublicNavbar = () => {
             <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
               <DropdownMenuItem asChild>
                 <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   History
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
                 <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Mission and Values
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
                 <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}>
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Board of Directors
                 </Link>
               </DropdownMenuItem>
@@ -112,31 +160,31 @@ const PublicNavbar = () => {
           </DropdownMenu>
           <Link
             to={user ? "/dashboard" : "/become-a-member"}
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             {user ? 'Dashboard' : 'Become a Member'}
           </Link>
           {!user && (
             <Link
               to="/login"
-              className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-              style={{ fontFamily: "'Poppins', sans-serif" }}
+              className={getDesktopLinkClasses('/login')}
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               Members Only
             </Link>
           )}
           <Link
             to="/resources"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            className={getDesktopLinkClasses('/resources')}
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Resources
           </Link>
           <Link
             to="/contact-us"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
+            className={getDesktopLinkClasses('/contact-us')}
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Contact Us
           </Link>
@@ -156,7 +204,7 @@ const PublicNavbar = () => {
           <div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[#48286e]">
-              <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Menu
               </span>
               <button
@@ -173,38 +221,41 @@ const PublicNavbar = () => {
               <Link
                 to="/#welcome"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                className={getMobileLinkClasses('/#welcome')}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 Welcome
               </Link>
 
               {/* About Us Section */}
               <div className="space-y-2">
-                <p className="text-white text-base font-semibold px-4 py-2" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                <p
+                  className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[#ff9e77]' : 'text-white'}`}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
                   About Us
                 </p>
                 <Link
                   to="/about/history"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  className={getMobileSubLinkClasses('/about/history')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   History
                 </Link>
                 <Link
                   to="/about/mission-values"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  className={getMobileSubLinkClasses('/about/mission-values')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   Mission and Values
                 </Link>
                 <Link
                   to="/about/board"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="text-[#ddd8eb] text-sm font-medium hover:bg-[#48286e] hover:text-white px-6 py-2 rounded-md transition-colors block"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  className={getMobileSubLinkClasses('/about/board')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   Board of Directors
                 </Link>
@@ -213,8 +264,8 @@ const PublicNavbar = () => {
               <Link
                 to={user ? "/dashboard" : "/become-a-member"}
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {user ? 'Dashboard' : 'Become a Member'}
               </Link>
@@ -223,8 +274,8 @@ const PublicNavbar = () => {
                 <Link
                   to="/login"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  className={getMobileLinkClasses('/login')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   Members Only
                 </Link>
@@ -233,8 +284,8 @@ const PublicNavbar = () => {
               <Link
                 to="/resources"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                className={getMobileLinkClasses('/resources')}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 Resources
               </Link>
@@ -242,8 +293,8 @@ const PublicNavbar = () => {
               <Link
                 to="/contact-us"
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                style={{ fontFamily: "'Poppins', sans-serif" }}
+                className={getMobileLinkClasses('/contact-us')}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 Contact Us
               </Link>
@@ -256,7 +307,7 @@ const PublicNavbar = () => {
                     setIsMobileMenuOpen(false);
                   }}
                   className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                  style={{ fontFamily: "'Poppins', sans-serif" }}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   {user ? 'Logout' : 'Login'}
                 </button>
@@ -265,7 +316,7 @@ const PublicNavbar = () => {
                     to="/register"
                     onClick={() => setIsMobileMenuOpen(false)}
                     className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
-                    style={{ fontFamily: "'Poppins', sans-serif" }}
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                   >
                     Register
                   </Link>

src/pages/BecomeMember.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from '../components/ui/button';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { ArrowDown } from 'lucide-react';
 
 const BecomeMember = () => {
@@ -13,7 +13,7 @@ const BecomeMember = () => {
   const imgIconAdminFee4 = `${process.env.PUBLIC_URL}/imgIconAdminFee4.png`;
   const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`;
   const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.png`;
-  
+
   return (
     <div className="min-h-screen bg-gray-50 relative">
       <PublicNavbar />

src/pages/BoardOfDirectors.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Card } from '../components/ui/card';
 
 const BoardOfDirectors = () => {

src/pages/ContactUs.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { Input } from '../components/ui/input';

src/pages/Donate.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { Input } from '../components/ui/input';

src/pages/DonationSuccess.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Card } from '../components/ui/card';
 import { Button } from '../components/ui/button';
 import { CheckCircle, Heart } from 'lucide-react';

src/pages/ForgotPassword.js

@@ -7,7 +7,7 @@ import { Label } from '../components/ui/label';
 import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { ArrowRight, ArrowLeft, Mail, CheckCircle } from 'lucide-react';
 
 const ForgotPassword = () => {

src/pages/History.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { Pen } from 'lucide-react';

src/pages/Landing.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 
 const Landing = () => {
   // LOAF brand assets (local)
@@ -14,13 +14,68 @@ const Landing = () => {
   const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
   const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
 
+  const InfoCard = ({ iconSrc, infoTitle, description }) => (
+    <Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-[363px]">
+      <div className="absolute -top-52 flex justify-center w-full">
+        <img
+          src={iconSrc}
+          alt={infoTitle}
+          className="w-full max-w-[330px] h-auto aspect-[10/9] object-contain"
+        />
+      </div>
+      <div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
+        <h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          {infoTitle}
+        </h5>
+        {description}
+      </div>
+    </Card>
+  );
+
+  const infoCardData = [
+    {
+      iconSrc: iconMeetGreet,
+      infoTitle: 'Meet and Greet',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
+          with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
+          take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
+          <a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
+        </p>
+      ),
+    },
+    {
+      iconSrc: iconSocials,
+      infoTitle: 'Socials',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
+          social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
+          games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
+          something for everyone.
+        </p>
+      ),
+    },
+    {
+      iconSrc: iconActive,
+      infoTitle: 'Active LOAFers',
+      description: (
+        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
+          hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
+          through the botanic gardens or the Arboretum.
+        </p>
+      ),
+    },
+  ];
   return (
     <div className="min-h-screen bg-white">
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 md:py-12 lg:py-0 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
-        <div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
+      <section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
+        <div className="py-20 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
           <div className="flex flex-col gap-6 items-center">
             <img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" />
           </div>
@@ -41,7 +96,7 @@ const Landing = () => {
       </section>
 
       {/* About Section */}
-      <section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 pb-0 flex flex-col gap-6 sm:gap-8">
+      <section id="about" className="bg-gradient-to-b pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col gap-6 sm:gap-8">
         <div className="flex flex-col items-center pt-12">
           <h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
@@ -54,55 +109,23 @@ const Landing = () => {
       </section>
 
       {/* Feature Cards Section */}
-      <section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-start justify-center">
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
-          <img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Meet and Greet
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
-              <a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
-            </p>
-          </div>
-        </Card>
-
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
-          <img src={iconSocials} alt="Socials" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Socials
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past social events include, bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is something for everyone.
-            </p>
-          </div>
-        </Card>
-
-        <Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
-          <img src={iconActive} alt="Active LOAFers" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
-          <div className="p-6 flex flex-col gap-4.5 w-full">
-            <h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Active LOAFers
-            </h5>
-            <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included, hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling through the botanic gardens or the Arboretum.
-            </p>
-          </div>
-        </Card>
+      <section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-stretch justify-center">
+        {infoCardData.map((card) => (
+          <InfoCard key={card.infoTitle} {...card} />
+        ))}
       </section>
 
       {/* CTA Section */}
       <section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
         <div className="flex flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
           <Link to="/register" className="w-full sm:w-auto">
-            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors">
+            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-3
+            py-7 text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors ">
               Become a Member
             </Button>
           </Link>
           <div className="flex-1 flex items-center justify-center">
-            <h4 className="text-white text-2xl sm:text-3xl md:text-4xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h4 className="text-white text-3xl  font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
               No matter your age or ability, there is something for everyone.
             </h4>
           </div>

src/pages/Login.js

@@ -8,7 +8,7 @@ import { Label } from '../components/ui/label';
 import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { ArrowRight, ArrowLeft } from 'lucide-react';
 
 const Login = () => {

src/pages/MissionValues.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Card } from '../components/ui/card';
 
 const MissionValues = () => {

src/pages/PrivacyPolicy.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 
 export default function PrivacyPolicy() {
   return (
@@ -12,7 +12,7 @@ export default function PrivacyPolicy() {
           {/* Header */}
           <div className="mb-8">
             <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
+              style={{ fontFamily: "'Inter', sans-serif" }}>
               Privacy Policy
             </h1>
             <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -38,7 +38,7 @@ export default function PrivacyPolicy() {
             {/* Section 1: What User Data We Collect */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>💻</span> What User Data We Collect
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -84,7 +84,7 @@ export default function PrivacyPolicy() {
             {/* Section 2: Why We Collect Your Data */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🎯</span> Why We Collect Your Data
               </h2>
               <div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -99,7 +99,7 @@ export default function PrivacyPolicy() {
             {/* Section 3: Sharing Information with Third Parties */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🤝</span> Sharing Information with Third Parties
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -121,7 +121,7 @@ export default function PrivacyPolicy() {
             {/* Section 4: Safeguarding and Securing the Data */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🔒</span> Safeguarding and Securing the Data
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -134,7 +134,7 @@ export default function PrivacyPolicy() {
             {/* Section 5: Our Cookie Policy */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🍪</span> Our Cookie Policy
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -159,7 +159,7 @@ export default function PrivacyPolicy() {
             {/* Section 6: Links to Other Websites */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🔗</span> Links to Other Websites
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -172,7 +172,7 @@ export default function PrivacyPolicy() {
             {/* Section 7: Restricting the Collection of your Personal Data */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🚫</span> Restricting the Collection of your Personal Data
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -189,7 +189,7 @@ export default function PrivacyPolicy() {
             {/* Section 8: Children Under Thirteen */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>👶</span> Children Under Thirteen
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -202,7 +202,7 @@ export default function PrivacyPolicy() {
             {/* Section 9: Changes to this Statement */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>🗓️</span> Changes to this Statement
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -215,7 +215,7 @@ export default function PrivacyPolicy() {
             {/* Section 10: Contact Information */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 <span>📧</span> Contact Information
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -237,7 +237,7 @@ export default function PrivacyPolicy() {
           {/* Back to Home Link */}
           <div className="mt-8 text-center">
             <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
-                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <span>←</span> Back to Home
             </Link>
           </div>

src/pages/Register.js

@@ -5,7 +5,7 @@ import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { ArrowRight, ArrowLeft } from 'lucide-react';
 import RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator';
 import RegistrationStep1 from '../components/registration/RegistrationStep1';

src/pages/ResetPassword.js

@@ -7,7 +7,7 @@ import { Label } from '../components/ui/label';
 import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { ArrowRight, Lock, AlertCircle } from 'lucide-react';
 
 const ResetPassword = () => {

src/pages/Resources.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 import { Card } from '../components/ui/card';
 import { ChevronDown, ExternalLink, Phone, Mail, MapPin } from 'lucide-react';
 
@@ -133,17 +133,15 @@ const Resources = () => {
                             {resource.name}
                           </span>
                           <ChevronDown
-                            className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 ${
-                              isExpanded ? 'rotate-180' : ''
-                            }`}
+                            className={`h-6 w-6 flex-shrink-0 ml-3 transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''
+                              }`}
                           />
                         </button>
 
                         {/* Accordion Content */}
                         <div
-                          className={`transition-all duration-300 ease-in-out ${
-                            isExpanded ? 'max-h-[1000px] opacity-100 mt-3' : 'max-h-0 opacity-0'
-                          }`}
+                          className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100 mt-3' : 'max-h-0 opacity-0'
+                            }`}
                         >
                           <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-lg">
                             {/* Description */}

src/pages/TermsOfService.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 
 export default function TermsOfService() {
   return (
@@ -12,7 +12,7 @@ export default function TermsOfService() {
           {/* Header */}
           <div className="mb-8">
             <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
-                style={{ fontFamily: "'Inter', sans-serif" }}>
+              style={{ fontFamily: "'Inter', sans-serif" }}>
               Terms of Service
             </h1>
             <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -26,7 +26,7 @@ export default function TermsOfService() {
             {/* Section 1: Agreement to Terms */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 1. Agreement to Terms
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -42,7 +42,7 @@ export default function TermsOfService() {
             {/* Section 2: Intellectual Property Rights */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 2. Intellectual Property Rights
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -55,7 +55,7 @@ export default function TermsOfService() {
             {/* Section 3: User Representations */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 3. User Representations
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -78,7 +78,7 @@ export default function TermsOfService() {
             {/* Section 4: Prohibited Activities */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 4. Prohibited Activities
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -101,7 +101,7 @@ export default function TermsOfService() {
             {/* Section 5: User Generated Contributions */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 5. User Generated Contributions
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -114,7 +114,7 @@ export default function TermsOfService() {
             {/* Section 6: Contribution License */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 6. Contribution License
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -127,7 +127,7 @@ export default function TermsOfService() {
             {/* Section 7: Submissions */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 7. Submissions
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -140,7 +140,7 @@ export default function TermsOfService() {
             {/* Section 8: Site Management */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 8. Site Management
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -153,7 +153,7 @@ export default function TermsOfService() {
             {/* Section 9: Term and Termination */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 9. Term and Termination
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -166,7 +166,7 @@ export default function TermsOfService() {
             {/* Section 10: Modifications and Interruptions */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 10. Modifications and Interruptions
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -179,7 +179,7 @@ export default function TermsOfService() {
             {/* Section 11: Governing Law */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 11. Governing Law
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -192,7 +192,7 @@ export default function TermsOfService() {
             {/* Section 12: Dispute Resolution */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 12. Dispute Resolution
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -205,7 +205,7 @@ export default function TermsOfService() {
             {/* Section 13: Corrections */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 13. Corrections
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -218,7 +218,7 @@ export default function TermsOfService() {
             {/* Section 14: Disclaimer */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 14. Disclaimer
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -231,7 +231,7 @@ export default function TermsOfService() {
             {/* Section 15: Limitations of Liability */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 15. Limitations of Liability
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -244,7 +244,7 @@ export default function TermsOfService() {
             {/* Section 16: Indemnification */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 16. Indemnification
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -257,7 +257,7 @@ export default function TermsOfService() {
             {/* Section 17: User Data */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 17. User Data
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -270,7 +270,7 @@ export default function TermsOfService() {
             {/* Section 18: Electronic Communications */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 18. Electronic Communications, Transactions, and Signatures
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -283,7 +283,7 @@ export default function TermsOfService() {
             {/* Section 19: Contact Us */}
             <section>
               <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4"
-                  style={{ fontFamily: "'Inter', sans-serif" }}>
+                style={{ fontFamily: "'Inter', sans-serif" }}>
                 19. Contact Us
               </h2>
               <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -305,7 +305,7 @@ export default function TermsOfService() {
           {/* Back to Home Link */}
           <div className="mt-8 text-center">
             <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
-                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <span>←</span> Back to Home
             </Link>
           </div>

src/pages/VerifyEmail.js

@@ -5,7 +5,7 @@ import { Button } from '../components/ui/button';
 import { Card } from '../components/ui/card';
 import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
 import PublicNavbar from '../components/PublicNavbar';
-import PublicFooter from '../components/PublicFooter';
+import PublicFooter from '../components/PublicFooter-kc';
 
 const API_URL = process.env.REACT_APP_BACKEND_URL;