Update New Features

2025-12-10 17:52:47 +07:00
parent 1f27c3224b
commit 36017e8693
39 changed files with 4977 additions and 196 deletions
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Button } from './ui/button';
+import { useAuth } from '../context/AuthContext';
+
+const PublicNavbar = () => {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+
+  // LOAF logo (local)
+  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+
+  const handleAuthAction = () => {
+    if (user) {
+      logout();
+      navigate('/');
+    } else {
+      navigate('/login');
+    }
+  };
+
+  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">
+        <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" }}
+          >
+            Register
+          </Link>
+        )}
+        <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]"
+            style={{ fontFamily: "'Montserrat', sans-serif" }}
+          >
+            Donate
+          </Button>
+        </Link>
+      </header>
+
+      {/* Main Header - Navigation */}
+      <header className="bg-[#664fa3] px-16 py-2 flex justify-between items-center">
+        <Link to="/">
+          <img src={loafLogo} alt="LOAF Logo" className="h-28 w-28 object-contain" />
+        </Link>
+        <nav className="flex gap-10 items-center">
+          <Link
+            to="/#welcome"
+            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
+            style={{ fontFamily: "'Poppins', sans-serif" }}
+          >
+            Welcome
+          </Link>
+          <Link
+            to="/#about"
+            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
+            style={{ fontFamily: "'Poppins', sans-serif" }}
+          >
+            About Us
+          </Link>
+          <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" }}
+          >
+            {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" }}
+            >
+              Members Only
+            </Link>
+          )}
+          <Link
+            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"
+            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
+            style={{ fontFamily: "'Poppins', sans-serif" }}
+          >
+            Contact Us
+          </Link>
+        </nav>
+      </header>
+    </>
+  );
+};
+
+export default PublicNavbar;