navbar items and hero buttons hover effects

Author: tomasohCHOM

src/app/(site)/_components/hero.tsx

@@ -12,9 +12,9 @@ const Hero: React.FC = () => {
       <img
         src="/assets/stars-lg.svg"
         alt="stars"
-        className="absolute left-1/2 w-full -translate-x-1/2 animate-pulse opacity-80 sm:-top-12"
+        className="absolute left-1/2 w-full -translate-x-1/2 animate-pulse opacity-75 delay-300 sm:-top-12"
       />
-      <section className="z-[2] mt-8 text-center text-purple_main">
+      <section className="z-[2] mt-8 text-center">
         <h1 className="custom-text-shadow relative text-xxl font-medium text-white md:text-[6rem]">
           FullyHacks 2025
         </h1>

src/app/(site)/_components/landing-page.tsx

@@ -31,15 +31,15 @@ const LandingPage: React.FC<LandingPageProps> = (props) => {
         <Hero />
         <CountDown />
         <div className="relative mt-14 flex items-center gap-12 text-md font-medium">
-          <Link href="/signin" className="">
-            <button className="z-[11] mx-0 box-border flex cursor-pointer flex-row items-center justify-center rounded-[20px] border-[3px] border-[#926BAF] py-2 px-4 text-[#926BAF] md:text-xl">
+          <Link href="/signin">
+            <button className="z-[11] mx-0 box-border rounded-[20px] bg-[#926BAF] py-2 px-4 text-white transition-all hover:brightness-110 focus:brightness-110 md:text-xl">
               Apply
             </button>
           </Link>
           <a
             target="_blank"
-            href="https://drive.google.com/file/d/1nw2_POGSUO0qCj24TT-fwW7hjqzBQpLW/view?usp=sharing"
-            className="z-[11] mx-0 box-border flex cursor-pointer flex-row items-center justify-center rounded-[20px] border-[3px] border-[#4A47CD] py-2 px-4 text-[#4A47CD] md:text-xl">
+            href="https://drive.google.com/file/d/1KgINevhJUq9wNlkT_m716dFldZ8NTwPO/view"
+            className="z-[11] mx-0 cursor-pointer rounded-[20px] border-[3px] border-[#4A47CD] py-2 px-4 text-[#4A47CD] transition-all hover:brightness-110 focus:brightness-110 md:text-xl">
             Sponsor Us!
           </a>
         </div>

src/app/(site)/_components/sponsors.tsx

@@ -97,7 +97,7 @@ const Sponsors: React.FC<SponsorsProps> = (props) => {
             src="/assets/cone.svg"
             alt="Light Cone"
             style={{ width: "400%", height: "auto" }}
-            className="animate-flicker absolute top-[65.5%] left-[80%] z-10 -translate-x-1/2 -rotate-2 transform opacity-70"
+            className="absolute top-[65.5%] left-[80%] z-10 -translate-x-1/2 -rotate-2 transform animate-flicker opacity-70"
           />
         </div>
       </div>

src/components/nav-bar.tsx

@@ -73,18 +73,19 @@ export const NavBarLanding: React.FC = () => {
           />
         </Link>
 
-        <ul className="flex items-center">
+        <ul className="flex items-center gap-4">
           {menuList.map((item, index) => (
-            <div key={item.id} className="flex items-center whitespace-nowrap">
+            <div
+              key={item.id}
+              className="flex items-center gap-4 whitespace-nowrap">
               <Link
                 href={item.href}
-                className="flex items-center px-2 py-2 text-sm transition-all duration-200 sm:px-3 sm:text-base lg:px-4 lg:text-lg xl:text-xl">
+                className="group relative py-2 text-sm sm:text-base lg:text-lg xl:text-xl">
                 {item.name}
+                <span className="absolute bottom-0 block h-0.5 w-0 bg-white transition-all duration-300 group-hover:w-full group-focus:w-full" />
               </Link>
               {index < menuList.length - 1 && (
-                <div className="mx-1 flex items-center sm:mx-1.5 lg:mx-2">
-                  <span className="h-[1.5em] w-[3px] bg-white" />
-                </div>
+                <span className="h-[1.5em] w-[3px] bg-white" />
               )}
             </div>
           ))}