navabar customisation for user reach

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.13",
     "axios": "^1.12.2",
-    "framer-motion": "^12.23.22",
+    "framer-motion": "^12.23.24",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",

src/components/Footer.jsx

@@ -113,7 +113,7 @@ const Footer = () => {
           borderTopColor: "rgba(160, 160, 255, 0.2)",
         }}
       >
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
+        <div id="contact" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
           {/* Main Footer Content */}
           <div className="mb-8">
             {/* brand section with social links */}

src/components/TopBar.jsx

@@ -9,15 +9,19 @@ const TopBar = () => {
 
   const handleLogout = () => {
     clearUserProfile();
-    setMenuOpen(false); // close menu after logout
-    // Add any additional logout logic here if needed
+    setMenuOpen(false);
+  };
+
+  const scrollToSection = (id) => {
+    const section = document.getElementById(id);
+    if (section) {
+      section.scrollIntoView({ behavior: "smooth" });
+      setMenuOpen(false);
+    }
   };
 
   const handleLogoClick = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth'
-    });
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   return (
@@ -31,14 +35,17 @@ const TopBar = () => {
     >
       <div className="max-w-7xl mx-auto flex justify-between items-center px-4 sm:px-6 lg:px-8 h-16">
         {/* Brand */}
-        <Link to="/" className="flex items-center gap-2" onClick={handleLogoClick}>
+        <button
+          onClick={handleLogoClick}
+          className="flex items-center gap-2 cursor-pointer"
+        >
           <motion.h1
             whileHover={{ scale: 1.05 }}
             className="font-press-start text-lg sm:text-xl text-[rgb(160,160,255)] tracking-tight"
           >
             HackerBlog
           </motion.h1>
-        </Link>
+        </button>
 
         {/* Hamburger Button */}
         <button
@@ -50,6 +57,16 @@ const TopBar = () => {
 
         {/* Desktop Nav */}
         <nav className="hidden sm:flex items-center gap-4">
+          {["features", "about", "community", "contact"].map((item) => (
+            <button
+              key={item}
+              onClick={() => scrollToSection(item)}
+              className="font-google-code px-4 py-2 rounded-lg border border-transparent text-slate-300 hover:border-[rgb(160,160,255)] hover:text-[rgb(160,160,255)] hover:bg-[rgba(160,160,255,0.1)] transition-all duration-300"
+            >
+              {item.charAt(0).toUpperCase() + item.slice(1)}
+            </button>
+          ))}
+
           {userProfile ? (
             <>
               <span className="font-google-code text-sm text-slate-300">
@@ -86,6 +103,16 @@ const TopBar = () => {
             menuOpen ? "flex" : "hidden"
           } sm:hidden flex-col fixed top-16 right-0 w-56 h-[calc(100vh-60px)] bg-[rgb(28,28,64)] border-l border-[rgba(160,160,255,0.1)] border-b p-4 gap-4 z-40`}
         >
+          {["features", "about", "community", "contact"].map((item) => (
+            <button
+              key={item}
+              onClick={() => scrollToSection(item)}
+              className="font-google-code px-4 py-2 rounded-lg border border-transparent text-slate-300 hover:border-[rgb(160,160,255)] hover:text-[rgb(160,160,255)] hover:bg-[rgba(160,160,255,0.1)] transition-all duration-300"
+            >
+              {item.charAt(0).toUpperCase() + item.slice(1)}
+            </button>
+          ))}
+
           {userProfile ? (
             <div className="flex flex-col items-start gap-3">
               <span className="font-google-code text-sm text-slate-300">
@@ -122,4 +149,5 @@ const TopBar = () => {
   );
 };
 
-export default TopBar;
+export
+  default TopBar;

src/pages/AboutPage.jsx

@@ -62,7 +62,7 @@ const AboutPage = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
+    <div id="about" className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
       {/* Hero Section */}
       <section className="px-4 sm:px-6 lg:px-8 py-24 md:py-15 text-center bg-gradient-to-b from-[rgba(160,160,255,0.1)] to-transparent">
         <motion.div

src/pages/LandingPage.jsx

@@ -4,20 +4,33 @@ import Terminal from "../components/ui/Terminal";
 import Community from "../components/ui/Community";
 import Footer from "../components/Footer";
 
-// modularized the code for readablity as requested in the issue
 const LandingPage = () => {
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white">
-      {/* hero section */}
-      <Hero />
-      {/* about section */}
-      <About />
-      {/* hacktoberfest terminal section */}
-      <Terminal />
-      {/* community section */}
-      <Community />
-      {/* future footer component will be added here */}
-      <Footer/>
+      {/* Hero section */}
+      <section id="hero">
+        <Hero />
+      </section>
+
+      {/* About section */}
+      <section id="about">
+        <About />
+      </section>
+
+      {/* Features / Terminal section */}
+      <section id="features">
+        <Terminal />
+      </section>
+
+      {/* Community section */}
+      <section id="community">
+        <Community />
+      </section>
+
+      {/* Footer */}
+     <section>
+      <Footer  id="contact"/>
+     </section>
     </div>
   );
 };