Refactor PublicFooter and PublicNavbar for improved responsiveness and styling; add InfoCard component to Landing page for better content organization

2025-12-16 23:14:20 -06:00
parent ac850d65d3
commit eee26cf108
3 changed files with 200 additions and 124 deletions
--- a/src/components/PublicNavbar.js
+++ b/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>