feat: improve UI for nav bar and community btn

Author: S1M0N38

about.html

@@ -39,9 +39,9 @@
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 xl:px-12">
       <div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 py-4">
         <a href="index.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">BalatroBench</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">BalatroBench</a>
         <a href="community.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">Community</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">Community</a>
         <a href="about.html" aria-current="page"
           class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 bg-zinc-100 text-zinc-700 dark:bg-zinc-700 dark:text-white rounded-lg font-medium text-sm transition-all border-2 border-zinc-300 dark:border-zinc-600">About</a>
       </div>

community.html

@@ -37,11 +37,11 @@
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 xl:px-12">
       <div class="flex items-center justify-center space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 py-4">
         <a href="index.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">BalatroBench</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">BalatroBench</a>
         <a href="community.html" aria-current="page"
           class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 bg-zinc-100 text-zinc-700 dark:bg-zinc-700 dark:text-white rounded-lg font-medium text-sm transition-all border-2 border-zinc-300 dark:border-zinc-600">Community</a>
         <a href="about.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">About</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">About</a>
       </div>
     </div>
   </nav>
@@ -50,13 +50,13 @@
   <div class="container mx-auto px-4 mt-12">
     <div class="flex flex-row justify-center items-center gap-4">
       <a href="https://discord.gg/SBaRyVDmFg" target="_blank" rel="noopener"
-        class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
+        class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-700 hover:text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
         <svg fill="currentColor" class="w-5 h-5">
           <use href="icons.svg#icon-discord"></use>
         </svg>
       </a>
       <a href="https://coder.github.io/balatrollm/strategies/" target="_blank" rel="noopener"
-        class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
+        class="px-6 py-3 bg-zinc-100 hover:bg-zinc-50 text-zinc-700 hover:text-zinc-900 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:text-white font-semibold text-sm rounded-lg shadow-md hover:shadow-lg dark:shadow-xl ring-1 ring-zinc-300 dark:ring-white/10 transition-colors inline-flex items-center space-x-2">
         <span>Contribute Your Strategy</span>
         <svg fill="currentColor" class="w-4 h-4">
           <use href="icons.svg#icon-arrow-top-right"></use>

index.html

@@ -41,9 +41,9 @@
         <a href="index.html" aria-current="page"
           class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 bg-zinc-100 text-zinc-700 dark:bg-zinc-700 dark:text-white rounded-lg font-medium text-sm transition-all border-2 border-zinc-300 dark:border-zinc-600">BalatroBench</a>
         <a href="community.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">Community</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">Community</a>
         <a href="about.html"
-          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-transparent">About</a>
+          class="inline-flex items-center justify-center h-10 w-28 sm:w-32 md:w-36 lg:w-40 px-3 sm:px-4 md:px-5 lg:px-6 text-zinc-500 hover:text-zinc-700 hover:bg-zinc-50 dark:text-zinc-400 hover:dark:text-zinc-200 hover:dark:bg-zinc-700/50 rounded-lg font-medium text-sm transition-all border border-zinc-300 dark:border-zinc-600">About</a>
       </div>
     </div>
   </nav>