Update Responsive and Contact Us page and function

src/components/PublicNavbar.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Button } from './ui/button';
 import { useAuth } from '../context/AuthContext';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Menu, X } from 'lucide-react';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,6 +13,7 @@ import {
 const PublicNavbar = () => {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   // LOAF logo (local)
   const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
@@ -29,7 +30,7 @@ const PublicNavbar = () => {
   return (
     <>
       {/* Top Header - Auth Actions */}
-      <header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-16 py-4 flex justify-end items-center gap-6">
+      <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"
@@ -57,11 +58,22 @@ const PublicNavbar = () => {
       </header>
 
       {/* Main Header - Navigation */}
-      <header className="bg-[#664fa3] px-16 py-2 flex justify-between items-center">
+      <header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
         <Link to="/">
-          <img src={loafLogo} alt="LOAF Logo" className="h-28 w-28 object-contain" />
+          <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>
-        <nav className="flex gap-10 items-center">
+
+        {/* Mobile Menu Button */}
+        <button
+          onClick={() => setIsMobileMenuOpen(true)}
+          className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+          aria-label="Open menu"
+        >
+          <Menu className="h-6 w-6" />
+        </button>
+
+        {/* Desktop Navigation */}
+        <nav className="hidden lg:flex gap-10 items-center">
           <Link
             to="/#welcome"
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
@@ -115,14 +127,14 @@ const PublicNavbar = () => {
             </Link>
           )}
           <Link
-            to="/#resources"
+            to="/resources"
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Resources
           </Link>
           <Link
-            to="/#contact"
+            to="/contact-us"
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
@@ -130,6 +142,148 @@ const PublicNavbar = () => {
           </Link>
         </nav>
       </header>
+
+      {/* Mobile Menu Drawer */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setIsMobileMenuOpen(false)}
+          />
+
+          {/* Drawer */}
+          <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" }}>
+                Menu
+              </span>
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+                aria-label="Close menu"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Navigation Links */}
+            <nav className="flex flex-col p-6 space-y-4">
+              <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" }}
+              >
+                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" }}>
+                  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" }}
+                >
+                  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" }}
+                >
+                  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" }}
+                >
+                  Board of Directors
+                </Link>
+              </div>
+
+              <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" }}
+              >
+                {user ? 'Dashboard' : 'Become a Member'}
+              </Link>
+
+              {!user && (
+                <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" }}
+                >
+                  Members Only
+                </Link>
+              )}
+
+              <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" }}
+              >
+                Resources
+              </Link>
+
+              <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" }}
+              >
+                Contact Us
+              </Link>
+
+              {/* Auth Actions */}
+              <div className="pt-4 border-t border-[#48286e] space-y-2">
+                <button
+                  onClick={() => {
+                    handleAuthAction();
+                    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" }}
+                >
+                  {user ? 'Logout' : 'Login'}
+                </button>
+                {!user && (
+                  <Link
+                    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" }}
+                  >
+                    Register
+                  </Link>
+                )}
+                <Link
+                  to="/donate"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className="block w-full"
+                >
+                  <Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
+                    Donate
+                  </Button>
+                </Link>
+              </div>
+            </nav>
+          </div>
+        </div>
+      )}
     </>
   );
 };