From cd99c9be47d9e5eb307ea366e59c836256501f03 Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Sun, 10 Aug 2025 19:47:27 +0530
Subject: [PATCH 1/2] style : Glass navbar on scrolling and achievement page
 fix

---
 src/App.jsx                     |  2 +-
 src/components/Achievements.jsx |  6 ++---
 src/components/Footer.jsx       | 10 +++----
 src/components/Navbar.jsx       | 47 +++++++++++++++++++++++++++------
 src/main.jsx                    |  2 +-
 5 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index de85312..41aef08 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,6 @@
 import Footer from "./components/Footer.jsx";
 import Navbar from "./components/Navbar.jsx";
-import { Outlet } from "react-router";
+import { Outlet } from "react-router-dom";
 
 const App = () => {
   return (
diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 53f76cd..48b1aff 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -1,11 +1,11 @@
-import { useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
 import achievementsData from "../config/achievement";
 
 export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <div className="px-4 md:px-12 py-8 max-w-screen-xl mx-auto">
+    <div className="px-4 pt-[64px] md:px-12 py-8 max-w-screen-xl mx-auto">
       <div className="md:mb-48 mb-12">
         <h2 className="text-3xl font-bold text-blue-900 mb-4">
           Our Achievements
@@ -20,7 +20,7 @@ export default function Achievements() {
         </p>
         <button
           className="bg-white text-blue-800 border border-blue-800 px-4 py-2 rounded hover:bg-blue-50 md:mb-12"
-          onClick={() => navigate("/achievementpage")}
+          onClick={() => navigate("/achievements")}
         >
           View All Achievements &gt;
         </button>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 5c7e7b1..5658527 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -75,27 +75,27 @@ const Footer = ({
           <h3 className="text-lg font-semibold">Quick Links</h3>
           <ul className="mt-2 space-y-1 text-sm">
             <li>
-              <Link to="/playground/about" className="hover:underline">
+              <Link to="/about" className="hover:underline">
                 About us
               </Link>
             </li>
             <li>
-              <Link to="/playground/team" className="hover:underline">
+              <Link to="/team" className="hover:underline">
                 Team
               </Link>
             </li>
             <li>
-              <Link to="/playground/events" className="hover:underline">
+              <Link to="/events" className="hover:underline">
                 Events
               </Link>
             </li>
             <li>
-              <Link to="/playground/achievements" className="hover:underline">
+              <Link to="/achievements" className="hover:underline">
                 Achievements
               </Link>
             </li>
             <li>
-              <Link to="/playground/gallery" className="hover:underline">
+              <Link to="/gallery" className="hover:underline">
                 Gallery
               </Link>
             </li>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 8bc4172..d769e6a 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,12 +1,27 @@
 import { siteConfig } from "../config/navbarHero";
 import Button from "./shared/Button";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export default function Navbar() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
-    <header className="bg-white w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 ">
+    <header
+      className={`w-full px-0 min-[1100px]:sticky fixed top-0 left-0 z-50 transition-all duration-300 ${
+        scrolled ? "bg-white/80 backdrop-blur-md shadow-md" : "bg-transparent"
+      }`}
+    >
       <div className="max-w-[1920px] w-screen mx-auto px-4 sm:px-6 md:px-8 lg:px-10 py-3 flex items-center text-black font-['Helvetica'] font-normal text-[20px] leading-[100%] tracking-[-0.015em]">
         <div className="flex items-center space-x-3 min-[900px]:space-x-6 flex-shrink-0">
           <img
@@ -32,10 +47,19 @@ export default function Navbar() {
         </nav>
 
         <div className="hidden min-[1100px]:flex items-center space-x-4 text-sm flex-shrink-0 ml-auto ">
-          <Button className="border border-black bg-white text-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none">
+          <Button
+            backgroundColor="white"
+            textColor="black"
+            className="border border-black px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-[rgba(55,115,236,1)] hover:text-white hover:border-none"
+          >
             Join Us
           </Button>
-          <Button className="bg-[rgba(6,25,70,1)] text-white px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]">
+
+          <Button
+            backgroundColor="rgba(6,25,70,1)"
+            textColor="white"
+            className="px-3 py-1.5 text-sm transition duration-300 ease-in-out hover:bg-white hover:text-[rgba(6,25,70,1)]"
+          >
             Contact Us
           </Button>
         </div>
@@ -50,7 +74,6 @@ export default function Navbar() {
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
           >
             {mobileMenuOpen ? (
               <path
@@ -83,7 +106,6 @@ export default function Navbar() {
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
             >
               <path
                 strokeLinecap="round"
@@ -108,10 +130,19 @@ export default function Navbar() {
           </nav>
 
           <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
-            <Button className="w-full border border-white bg-transparent text-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]">
+            <Button
+              backgroundColor="transparent"
+              textColor="white"
+              className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
+            >
               Join Us
             </Button>
-            <Button className="w-full bg-white text-[rgba(6,25,70,1)] px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100">
+
+            <Button
+              backgroundColor="white"
+              textColor="rgba(6,25,70,1)"
+              className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
+            >
               Contact Us
             </Button>
           </div>
diff --git a/src/main.jsx b/src/main.jsx
index bca00c0..4aac412 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { BrowserRouter, Route, Routes } from "react-router";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import App from "./App.jsx";
 import Test from "./components/Test.jsx";
 import Home from "./pages/landing-page/Home.jsx";

From c778a3e2bf34ac3427f02af182044075b8bbee3d Mon Sep 17 00:00:00 2001
From: mshalom27 <menshalom07@gmail.com>
Date: Sun, 10 Aug 2025 20:10:59 +0530
Subject: [PATCH 2/2] achievement page

---
 src/components/Achievements.jsx |   2 +-
 src/components/Navbar.jsx       | 115 ++++++++++++++++----------------
 2 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/src/components/Achievements.jsx b/src/components/Achievements.jsx
index 48b1aff..6f5a1a1 100644
--- a/src/components/Achievements.jsx
+++ b/src/components/Achievements.jsx
@@ -5,7 +5,7 @@ export default function Achievements() {
   const navigate = useNavigate();
 
   return (
-    <div className="px-4 pt-[64px] md:px-12 py-8 max-w-screen-xl mx-auto">
+    <div className="px-4 pt-32 md:pt-40 md:px-12 py-8 max-w-screen-xl mx-auto">
       <div className="md:mb-48 mb-12">
         <h2 className="text-3xl font-bold text-blue-900 mb-4">
           Our Achievements
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index d769e6a..adf542e 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -75,79 +75,78 @@ export default function Navbar() {
             stroke="currentColor"
             viewBox="0 0 24 24"
           >
-            {mobileMenuOpen ? (
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            ) : (
+            {!mobileMenuOpen ? (
               <path
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 strokeWidth={2}
                 d="M4 6h16M4 12h16M4 18h16"
               />
-            )}
+            ) : null}
           </svg>
         </button>
       </div>
 
-      {mobileMenuOpen && (
-        <div className="min-[1100px]:hidden fixed inset-0 bg-[#173477ec] px-6 py-6 z-40 overflow-auto text-white">
-          <button
-            className="absolute top-6 right-6 text-white"
-            onClick={() => setMobileMenuOpen(false)}
-            aria-label="Close menu"
+      <div
+        className={`min-[1100px]:hidden fixed inset-0 px-6 py-6 z-40 overflow-auto text-white bg-[#173477ec] transition-all duration-500 ease-in-out
+          ${
+            mobileMenuOpen
+              ? "opacity-100 translate-y-0 pointer-events-auto"
+              : "opacity-0 -translate-y-8 pointer-events-none"
+          }`}
+        style={{ willChange: "opacity, transform" }}
+      >
+        <button
+          className="absolute top-6 right-6 text-white"
+          onClick={() => setMobileMenuOpen(false)}
+          aria-label="Close menu"
+        >
+          <svg
+            className="w-8 h-8"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
           >
-            <svg
-              className="w-8 h-8"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-
-          <nav className="mt-14 flex flex-col w-full">
-            {siteConfig.navigation.links.map((item) => (
-              <a
-                key={item.name}
-                href={item.href}
-                className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
-                onClick={() => setMobileMenuOpen(false)}
-              >
-                {item.name}
-              </a>
-            ))}
-          </nav>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
 
-          <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
-            <Button
-              backgroundColor="transparent"
-              textColor="white"
-              className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
+        <nav className="mt-14 flex flex-col w-full">
+          {siteConfig.navigation.links.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="w-full py-4 text-lg font-semibold text-center text-white hover:text-blue-300 transition-colors"
+              onClick={() => setMobileMenuOpen(false)}
             >
-              Join Us
-            </Button>
+              {item.name}
+            </a>
+          ))}
+        </nav>
 
-            <Button
-              backgroundColor="white"
-              textColor="rgba(6,25,70,1)"
-              className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
-            >
-              Contact Us
-            </Button>
-          </div>
+        <div className="mt-8 flex flex-col space-y-4 pt-6 w-full">
+          <Button
+            backgroundColor="transparent"
+            textColor="white"
+            className="w-full border border-white px-4 py-3 text-center text-base transition duration-300 hover:bg-white hover:text-[rgba(6,25,70,1)]"
+          >
+            Join Us
+          </Button>
+
+          <Button
+            backgroundColor="white"
+            textColor="rgba(6,25,70,1)"
+            className="w-full px-4 py-3 text-center text-base transition duration-300 hover:bg-blue-100"
+          >
+            Contact Us
+          </Button>
         </div>
-      )}
+      </div>
     </header>
   );
 }