From f35898e6b3030afdd9c7ff1d6117dd91f489b4ee Mon Sep 17 00:00:00 2001
From: Krish Agarwal <agarwalkrish526@gmail.com>
Date: Mon, 20 Jul 2026 19:02:15 +0530
Subject: [PATCH] Update:hover effect

---
 src/components/HeroSection.jsx | 18 ++++++++++++++----
 src/components/Navbar.jsx      | 11 +++++++----
 src/components/Sponsor.jsx     |  4 ++++
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
index dbd65c0..292b5a3 100644
--- a/src/components/HeroSection.jsx
+++ b/src/components/HeroSection.jsx
@@ -28,9 +28,19 @@ export default function HeroSection() {
             <div className="inline-block px-4 py-2 dark:text-gray-100 dark:bg-slate-800 bg-[#021640]/10 text-[#021640] rounded-full text-sm md:text-base font-medium tracking-wide uppercase mt-10">
               {siteConfig.hero.title}
             </div>
-            <h1 className="text-5xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-wide">
-              {siteConfig.hero.subtitle}
-            </h1>
+            {(() => {
+              const words = siteConfig.hero.subtitle.split(" ");
+              const first = words[0];
+              const rest = words.slice(1).join(" ");
+              return (
+                <h1 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-extrabold dark:text-white text-[#021640] leading-tight tracking-tighter max-w-3xl mx-auto lg:mx-0">
+                  <span className="block sm:inline">{first}</span>
+                  <span className="block sm:inline">
+                    {rest ? ` ${rest}` : ""}
+                  </span>
+                </h1>
+              );
+            })()}
             <p className="text-xl md:text-2xl dark:text-gray-300 text-gray-600 leading-relaxed md:leading-normal max-w-2xl mx-auto lg:mx-0">
               {siteConfig.hero.description}
             </p>
@@ -61,7 +71,7 @@ export default function HeroSection() {
               <img
                 src={siteConfig.hero.image}
                 alt="ASME NIT Rourkela - Engineering Excellence"
-                className="w-full h-[440px] md:h-[500px] lg:h-[560px] object-cover transition-transform duration-300 hover:scale-105"
+                className="w-full h-[320px] sm:h-[380px] md:h-[500px] lg:h-[560px] object-cover transition-transform duration-300 hover:scale-105"
               />
               <div className="absolute inset-0 ring-1 ring-black/10 rounded-xl"></div>
             </div>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 34e8687..12ec5c9 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -49,6 +49,9 @@ export default function Navbar() {
     }
   };
 
+  const navItemBase =
+    "relative text-base font-semibold px-4 py-2 rounded-lg transition-all duration-300 hover:scale-105 hover:bg-slate-50 dark:hover:bg-slate-800 after:absolute after:bottom-0 after:left-0 after:h-[2.5px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-gradient-to-r after:from-[#0A1440] after:to-[#1A56DB] after:transition-transform after:duration-300 hover:after:origin-bottom-left hover:after:scale-x-100";
+
   return (
     <header
       className={`w-full fixed top-0 left-0 z-50 transition-all duration-300 ${
@@ -87,10 +90,10 @@ export default function Navbar() {
                 key={item.name}
                 to={item.href}
                 className={({ isActive }) =>
-                  `text-base font-medium tracking-wide transition-all duration-300 whitespace-nowrap px-4 py-2 rounded-lg ${
+                  `${navItemBase} whitespace-nowrap ${
                     isActive
-                      ? "text-[#021640] dark:text-white border-b-2 border-blue-400 pb-1 -translate-y-0.5"
-                      : "text-gray-700 dark:text-gray-200 hover:text-[#021640] dark:hover:text-white  hover:-translate-y-1"
+                      ? "text-[#021640] dark:text-white border-b-2 border-blue-400 pb-1 -translate-y-0.5 after:origin-bottom-left after:scale-x-100"
+                      : "text-gray-700 dark:text-gray-200 hover:text-[#021640] dark:hover:text-white hover:-translate-y-1"
                   }`
                 }
               >
@@ -199,7 +202,7 @@ export default function Navbar() {
                 <a
                   key={item.name}
                   href={item.href}
-                  className="dark:text-white block w-full py-4 px-6 text-lg font-medium text-white hover:text-gray-300 hover:bg-white/10 rounded-lg transition-all duration-200 text-center"
+                  className={`relative block w-full text-center text-lg font-semibold px-6 py-4 rounded-lg transition-all duration-200 text-white hover:text-gray-300 hover:bg-white/10 after:absolute after:bottom-0 after:left-0 after:h-[2.5px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-gradient-to-r after:from-[#0A1440] after:to-[#1A56DB] after:transition-transform after:duration-300 hover:after:origin-bottom-left hover:after:scale-x-100`}
                   onClick={() => setMobileMenuOpen(false)}
                 >
                   {item.name}
diff --git a/src/components/Sponsor.jsx b/src/components/Sponsor.jsx
index 73b3484..f71f0b3 100644
--- a/src/components/Sponsor.jsx
+++ b/src/components/Sponsor.jsx
@@ -98,6 +98,10 @@ const SponsorsSection = () => {
             background: #021640;
             transform: scale(1.2);
           }
+
+          .dark .sponsors-swiper .swiper-pagination-bullet-active {
+            background: #2563eb;
+          }
         `}</style>
       </div>
     </section>