From b6190535470e386372ff52d17afa9fae889151ab Mon Sep 17 00:00:00 2001
From: Hunter69240 <aadishds@gmail.com>
Date: Sat, 18 Jul 2026 17:08:30 +0530
Subject: [PATCH 1/2] fix(navbar): unify login/register navbar into shared
 PublicNavBar component

---
 frontend/src/components/common/Login.jsx      | 20 ++-----------
 .../src/components/common/PublicNavBar.jsx    | 29 +++++++++++++++++++
 frontend/src/components/common/Register.jsx   | 20 ++-----------
 3 files changed, 35 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/components/common/PublicNavBar.jsx

diff --git a/frontend/src/components/common/Login.jsx b/frontend/src/components/common/Login.jsx
index 5efae6e..e7d3383 100644
--- a/frontend/src/components/common/Login.jsx
+++ b/frontend/src/components/common/Login.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom';
-import Navbar from 'react-bootstrap/Navbar';
-import { Container, Nav } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -9,6 +8,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import axiosInstance from './AxiosInstance';
+import PublicNavBar from './PublicNavBar';
 
 const Login = () => {
    const navigate = useNavigate()
@@ -97,21 +97,7 @@ const Login = () => {
    return (
       <>
 
-         <Navbar expand="lg" className="bg-body-tertiary premium-navbar">
-            <Container fluid>
-               <Navbar.Brand>
-                 <span className="brand-premium"><span className="brand-premium-L">L</span>earnhub</span>
-               </Navbar.Brand>
-               <Navbar.Toggle aria-controls="navbarScroll" />
-               <Navbar.Collapse id="navbarScroll">
-                  <Nav className="ms-auto premium-nav-links">
-                     <Link className="premium-btn" to={'/'}>Home</Link>
-                     <Link className="premium-btn" to={'/login'}>Login</Link>
-                     <Link className="premium-btn" to={'/register'}>Register</Link>
-                  </Nav>
-               </Navbar.Collapse>
-            </Container>
-         </Navbar>
+         <PublicNavBar />
 
          <div className='first-container premium-bg'>
             <Container component="main" className="premium-login-container">
diff --git a/frontend/src/components/common/PublicNavBar.jsx b/frontend/src/components/common/PublicNavBar.jsx
new file mode 100644
index 0000000..e8b3dcd
--- /dev/null
+++ b/frontend/src/components/common/PublicNavBar.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { NavLink } from 'react-router-dom';
+import Navbar from 'react-bootstrap/Navbar';
+import { Container, Nav } from 'react-bootstrap';
+
+const PublicNavBar = () => {
+   return (
+      <Navbar expand="lg" className="landing-nav-wrapper">
+         <Container fluid className="landing-nav">
+            <Navbar.Brand href="/" className="landing-brand">
+               <span className="landing-brand-mark">L</span>
+               <span>
+                  <strong>Learnhub</strong>
+               </span>
+            </Navbar.Brand>
+            <Navbar.Toggle aria-controls="publicNavbarScroll" />
+            <Navbar.Collapse id="publicNavbarScroll">
+               <Nav className="landing-nav-actions ms-auto">
+                  <NavLink className="nav-text-link" to={'/'}>Home</NavLink>
+                  <NavLink className="nav-text-link" to={'/login'}>Login</NavLink>
+                  <NavLink className="nav-text-link" to={'/register'}>Register</NavLink>
+               </Nav>
+            </Navbar.Collapse>
+         </Container>
+      </Navbar>
+   )
+}
+
+export default PublicNavBar
\ No newline at end of file
diff --git a/frontend/src/components/common/Register.jsx b/frontend/src/components/common/Register.jsx
index c6b224a..91fc8f3 100644
--- a/frontend/src/components/common/Register.jsx
+++ b/frontend/src/components/common/Register.jsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom';
-import Navbar from 'react-bootstrap/Navbar';
-import { Container, Nav } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -9,6 +8,7 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import axiosInstance from './AxiosInstance';
+import PublicNavBar from './PublicNavBar';
 import Dropdown from 'react-bootstrap/Dropdown';
 
 
@@ -77,21 +77,7 @@ const Register = () => {
    return (
       <>
 
-         <Navbar expand="lg" className="bg-body-tertiary premium-navbar">
-            <Container fluid>
-               <Navbar.Brand>
-                 <span className="brand-premium"><span className="brand-premium-L">L</span>earnhub</span>
-               </Navbar.Brand>
-               <Navbar.Toggle aria-controls="navbarScroll" />
-               <Navbar.Collapse id="navbarScroll">
-                  <Nav className="ms-auto premium-nav-links">
-                     <Link className="premium-btn" to={'/'}>Home</Link>
-                     <Link className="premium-btn" to={'/login'}>Login</Link>
-                     <Link className="premium-btn" to={'/register'}>Register</Link>
-                  </Nav>
-               </Navbar.Collapse>
-            </Container>
-         </Navbar>
+         <PublicNavBar />
          <div className="first-container premium-bg">
             <Container component="main" className="premium-login-container">
                <Box className="premium-login-box">

From 13589593dea102cba28d210c96bdefadcba68217 Mon Sep 17 00:00:00 2001
From: Hunter69240 <aadishds@gmail.com>
Date: Sat, 18 Jul 2026 17:16:44 +0530
Subject: [PATCH 2/2] fix(navbar): match brand slogan and casing with Home page
 navbar

---
 frontend/src/components/common/PublicNavBar.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/PublicNavBar.jsx b/frontend/src/components/common/PublicNavBar.jsx
index e8b3dcd..d0e5717 100644
--- a/frontend/src/components/common/PublicNavBar.jsx
+++ b/frontend/src/components/common/PublicNavBar.jsx
@@ -10,7 +10,8 @@ const PublicNavBar = () => {
             <Navbar.Brand href="/" className="landing-brand">
                <span className="landing-brand-mark">L</span>
                <span>
-                  <strong>Learnhub</strong>
+                  <strong>LearnHub</strong>
+                  <small>Skills that move with you</small>
                </span>
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="publicNavbarScroll" />